From 6f5479f840bda2b5752d5f85ddb60dd081f9c427 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Fri, 28 Jun 2024 14:42:30 +0700
Subject: [PATCH 01/18] Final: Enhanced app's loading times (#196)

---
 index.html | 1 -
 1 file changed, 1 deletion(-)
diff --git a/index.html b/index.html
index f0028e16..ec6a0abd 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>

From eb6aeb4addb6f67194a086c99dafaf00061d9b95 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 15 Jul 2024 10:11:58 +0700
Subject: [PATCH 02/18] Final: Enhanced app's loading times (#196)

---
 MovieVerse-Backend/.idea/workspace.xml | 15 ++++++---------
 MovieVerse-Frontend/js/chatbot.js      | 19 -------------------
 2 files changed, 6 insertions(+), 28 deletions(-)

diff --git a/MovieVerse-Backend/.idea/workspace.xml b/MovieVerse-Backend/.idea/workspace.xml
index 9210f6a0..00667f36 100644
--- a/MovieVerse-Backend/.idea/workspace.xml
+++ b/MovieVerse-Backend/.idea/workspace.xml
@@ -4,11 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="8bb29d63-e98d-4c08-9f32-16747d3aec75" name="Changes" comment="Fix: Updated Backend (#196)">
-      <change beforePath="$PROJECT_DIR$/../.idea/dataSources.local.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../.idea/dataSources.local.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate" beforeDir="false" afterPath="$PROJECT_DIR$/../MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate" afterDir="false" />
-    </list>
+    <list default="true" id="8bb29d63-e98d-4c08-9f32-16747d3aec75" name="Changes" comment="Fix: Updated Backend (#196)" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -215,11 +211,11 @@
       <method v="2" />
     </configuration>
     <list>
-      <item itemvalue="Django Server.Django-Backend" />
       <item itemvalue="Django tests.Test: movieverse.tests" />
-      <item itemvalue="OpenAPI/Swagger Code Generator.movieverse-openapi.yaml" />
       <item itemvalue="Python.flask" />
       <item itemvalue="Python.python manage.py runserver" />
+      <item itemvalue="Django Server.Django-Backend" />
+      <item itemvalue="OpenAPI/Swagger Code Generator.movieverse-openapi.yaml" />
       <item itemvalue="Python tests.Python tests in api_test_suite.py" />
     </list>
     <recent_temporary>
@@ -235,8 +231,8 @@
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
-        <option value="bundled-js-predefined-1d06a55b98c1-0b3e54e931b4-JavaScript-PY-241.17890.14" />
-        <option value="bundled-python-sdk-5b207ade9991-7e9c3bbb6e34-com.jetbrains.pycharm.pro.sharedIndexes.bundled-PY-241.17890.14" />
+        <option value="bundled-js-predefined-1d06a55b98c1-0b3e54e931b4-JavaScript-PY-241.18034.82" />
+        <option value="bundled-python-sdk-975db3bf15a3-2767605e8bc2-com.jetbrains.pycharm.pro.sharedIndexes.bundled-PY-241.18034.82" />
       </set>
     </attachedChunks>
   </component>
@@ -264,6 +260,7 @@
       <workItem from="1718859543200" duration="2000" />
       <workItem from="1719110625564" duration="2062000" />
       <workItem from="1719151721860" duration="573000" />
+      <workItem from="1721010829658" duration="240000" />
     </task>
     <task id="LOCAL-00001" summary="Enhanced Backend">
       <option name="closed" value="true" />
diff --git a/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Frontend/js/chatbot.js
index 6c17c9b3..ddb0fe21 100644
--- a/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Frontend/js/chatbot.js
@@ -598,22 +598,6 @@ async function fetchCompanyDetails(companyName) {
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    // if (lowerMessage.startsWith("do you know about ") ||
-    //     lowerMessage.startsWith("tell me about ") ||
-    //     lowerMessage.startsWith("what is ")) {
-    //     const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-    //     return await fetchMovieDetailsFromTMDB(movieName);
-    // }
-
-    // if (lowerMessage.startsWith("show me details about ") ||
-    //     lowerMessage.startsWith("i want to know more about ") ||
-    //     lowerMessage.startsWith("details about ") ||
-    //     lowerMessage.startsWith("search for ")) {
-    //     const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-    //     fetchAndRedirectToMovieDetails(movieName);
-    //     return `Searching for details about "${movieName}". Please wait...`;
-    // }
-
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
@@ -626,9 +610,6 @@ async function movieVerseResponse(message) {
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();

From b521fee48fdac52141e6c592ab0ad6d1750855c6 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 15 Jul 2024 10:14:32 +0700
Subject: [PATCH 03/18] Final: Enhanced app chatbot (#196)

---
 MovieVerse-Frontend/js/chatbot.js | 213 +-----------------------------
 1 file changed, 1 insertion(+), 212 deletions(-)

diff --git a/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Frontend/js/chatbot.js
index ddb0fe21..30ad3a1f 100644
--- a/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Frontend/js/chatbot.js
@@ -268,63 +268,6 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
-function updateUniqueDirectorsViewed(directorId) {
-    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-    if (!viewedDirectors.includes(directorId)) {
-        viewedDirectors.push(directorId);
-        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
-    }
-}
-
-function updateActorVisitCount(actorId, actorName) {
-    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-    if (!actorVisits[actorId]) {
-        actorVisits[actorId] = { count: 0, name: actorName };
-    }
-
-    actorVisits[actorId].count += 1;
-    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
-}
-
-function updateDirectorVisitCount(directorId, directorName) {
-    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    if (!directorVisits[directorId]) {
-        directorVisits[directorId] = { count: 0, name: directorName };
-    }
-
-    directorVisits[directorId].count += 1;
-    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
-}
-
-function calculateMoviesToDisplay() {
-    const screenWidth = window.innerWidth;
-    if (screenWidth <= 689.9) return 10; // 1 movie per row
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -352,50 +295,6 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
@@ -419,41 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -468,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -552,49 +383,6 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
@@ -669,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';

From c458664665f92c62e3b7d2c9e7a1d6507a8bfabe Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 15 Jul 2024 10:17:55 +0700
Subject: [PATCH 04/18] Final: Enhanced app chatbot (#196)

---
 index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/index.html b/index.html
index ec6a0abd..62e0d19e 100644
--- a/index.html
+++ b/index.html
@@ -534,7 +534,6 @@
         }
     </style>
 </head>
-
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -542,7 +541,6 @@
     gtag('js', new Date());
     gtag('config', 'G-CQKJ67FXZ4');
 </script>
-
 <body>
     <header id="homepage-header" style="margin-bottom: -10px">
         <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">

From c2edfe7136b4c883851f8049b005ec70175d63fa Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 15 Jul 2024 10:18:22 +0700
Subject: [PATCH 05/18] Final: Enhanced app chatbot (#196)

---
 index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/index.html b/index.html
index 62e0d19e..187c2bef 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -37,7 +36,6 @@
     <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
     <meta name="yandex-verification" content="82af90b194a42a28" />
     <meta name="referrer" content="no-referrer-when-downgrade">
-
     <!-- JS and CSS files -->
     <script src="index.js" defer></script>
     <script src="/MovieVerse-Frontend/js/settings.js" defer></script>

From 0d08b90e561d3487767534371a7c1ddbbc11c394 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 15 Jul 2024 10:19:03 +0700
Subject: [PATCH 06/18] Final: Enhanced app chatbot (#196)

---
 index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.html b/index.html
index 187c2bef..60dbe98a 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
+    
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -36,6 +37,7 @@
     <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
     <meta name="yandex-verification" content="82af90b194a42a28" />
     <meta name="referrer" content="no-referrer-when-downgrade">
+
     <!-- JS and CSS files -->
     <script src="index.js" defer></script>
     <script src="/MovieVerse-Frontend/js/settings.js" defer></script>

From 9012b27a23d5170c873ddd53595cea429b0136ca Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Wed, 17 Jul 2024 12:01:31 +0700
Subject: [PATCH 07/18] Final: Enhance app functionalities (#196)

---
 MovieVerse-Frontend/html/chat.html            |    1 +
 MovieVerse-Frontend/js/chat.js                |   17 +-
 .../app/src/main/assets/www/css/index.scss    |   87 +
 .../app/src/main/assets/www/css/navbar.scss   |   97 +
 .../app/src/main/assets/www/css/profile.scss  |   83 +
 .../app/src/main/assets/www/css/reset.css     |   43 +
 .../app/src/main/assets/www/css/style.css     | 4087 +++++++++++++++++
 .../app/src/main/assets/www/css/trivia.css    | 1157 +++++
 .../app/src/main/assets/www/html/about.html   | 1286 ++++++
 .../main/assets/www/html/actor-details.html   |  808 ++++
 .../src/main/assets/www/html/analytics.html   |  910 ++++
 .../src/main/assets/www/html/api_fails.html   | 1026 +++++
 .../app/src/main/assets/www/html/article.hbs  |   17 +
 .../app/src/main/assets/www/html/chat.html    | 1023 +++++
 .../app/src/main/assets/www/html/chatbot.html |  846 ++++
 .../assets/www/html/christopher-nolan.html    |  497 ++
 .../main/assets/www/html/company-details.html |  795 ++++
 .../main/assets/www/html/create-account.html  | 1052 +++++
 .../assets/www/html/director-details.html     |  835 ++++
 .../src/main/assets/www/html/favorites.html   | 1102 +++++
 .../src/main/assets/www/html/feedback.html    | 1107 +++++
 .../src/main/assets/www/html/inception.html   |  521 +++
 .../assets/www/html/leonardo-dicaprio.html    |  470 ++
 .../main/assets/www/html/movie-details.html   |  907 ++++
 .../src/main/assets/www/html/movie-match.html |  854 ++++
 .../main/assets/www/html/movie-timeline.html  |  806 ++++
 .../src/main/assets/www/html/movies-list.hbs  |   35 +
 .../main/assets/www/html/notifications.html   | 1329 ++++++
 .../app/src/main/assets/www/html/offline.html |  798 ++++
 .../main/assets/www/html/privacy-policy.html  |  395 ++
 .../app/src/main/assets/www/html/profile.ejs  |   59 +
 .../main/assets/www/html/reset-password.html  | 1097 +++++
 .../app/src/main/assets/www/html/search.html  |  921 ++++
 .../src/main/assets/www/html/settings.html    | 1231 +++++
 .../app/src/main/assets/www/html/sign-in.html | 1077 +++++
 .../app/src/main/assets/www/html/support.html | 1101 +++++
 .../assets/www/html/terms-of-service.html     |  399 ++
 .../app/src/main/assets/www/html/trivia.html  | 1173 +++++
 .../src/main/assets/www/html/tv-details.html  |  938 ++++
 .../main/assets/www/html/user-profile.html    | 1337 ++++++
 .../app/src/main/assets/www/index.html        |    3 -
 .../app/src/main/assets/www/js/chat.js        |   17 +-
 .../app/src/main/assets/www/js/chatbot.js     |  247 +-
 .../src/main/assets/www/js/movie-details.js   |   11 +-
 .../app/src/main/assets/www/js/sign-in.js     |    2 +-
 .../platforms/ios/www/css/index.scss          |   87 +
 .../platforms/ios/www/css/navbar.scss         |   97 +
 .../platforms/ios/www/css/profile.scss        |   83 +
 .../platforms/ios/www/css/reset.css           |   43 +
 .../platforms/ios/www/css/style.css           | 4087 +++++++++++++++++
 .../platforms/ios/www/css/trivia.css          | 1157 +++++
 .../platforms/ios/www/html/about.html         | 1286 ++++++
 .../platforms/ios/www/html/actor-details.html |  808 ++++
 .../platforms/ios/www/html/analytics.html     |  910 ++++
 .../platforms/ios/www/html/api_fails.html     | 1026 +++++
 .../platforms/ios/www/html/article.hbs        |   17 +
 .../platforms/ios/www/html/chat.html          | 1023 +++++
 .../platforms/ios/www/html/chatbot.html       |  846 ++++
 .../ios/www/html/christopher-nolan.html       |  497 ++
 .../ios/www/html/company-details.html         |  795 ++++
 .../ios/www/html/create-account.html          | 1052 +++++
 .../ios/www/html/director-details.html        |  835 ++++
 .../platforms/ios/www/html/favorites.html     | 1102 +++++
 .../platforms/ios/www/html/feedback.html      | 1107 +++++
 .../platforms/ios/www/html/inception.html     |  521 +++
 .../ios/www/html/leonardo-dicaprio.html       |  470 ++
 .../platforms/ios/www/html/movie-details.html |  907 ++++
 .../platforms/ios/www/html/movie-match.html   |  854 ++++
 .../ios/www/html/movie-timeline.html          |  806 ++++
 .../platforms/ios/www/html/movies-list.hbs    |   35 +
 .../platforms/ios/www/html/notifications.html | 1329 ++++++
 .../platforms/ios/www/html/offline.html       |  798 ++++
 .../ios/www/html/privacy-policy.html          |  395 ++
 .../platforms/ios/www/html/profile.ejs        |   59 +
 .../ios/www/html/reset-password.html          | 1097 +++++
 .../platforms/ios/www/html/search.html        |  921 ++++
 .../platforms/ios/www/html/settings.html      | 1231 +++++
 .../platforms/ios/www/html/sign-in.html       | 1077 +++++
 .../platforms/ios/www/html/support.html       | 1101 +++++
 .../ios/www/html/terms-of-service.html        |  399 ++
 .../platforms/ios/www/html/trivia.html        | 1173 +++++
 .../platforms/ios/www/html/tv-details.html    |  938 ++++
 .../platforms/ios/www/html/user-profile.html  | 1337 ++++++
 .../platforms/ios/www/index.html              |    3 -
 .../platforms/ios/www/js/chat.js              |   17 +-
 .../platforms/ios/www/js/chatbot.js           |  247 +-
 .../platforms/ios/www/js/movie-details.js     |   11 +-
 .../platforms/ios/www/js/sign-in.js           |    2 +-
 MovieVerse-Mobile/www/css/index.scss          |   87 +
 MovieVerse-Mobile/www/css/navbar.scss         |   97 +
 MovieVerse-Mobile/www/css/profile.scss        |   83 +
 MovieVerse-Mobile/www/css/reset.css           |   43 +
 MovieVerse-Mobile/www/css/style.css           | 4087 +++++++++++++++++
 MovieVerse-Mobile/www/css/trivia.css          | 1157 +++++
 MovieVerse-Mobile/www/html/about.html         | 1286 ++++++
 MovieVerse-Mobile/www/html/actor-details.html |  808 ++++
 MovieVerse-Mobile/www/html/analytics.html     |  910 ++++
 MovieVerse-Mobile/www/html/api_fails.html     | 1026 +++++
 MovieVerse-Mobile/www/html/article.hbs        |   17 +
 MovieVerse-Mobile/www/html/chat.html          | 1023 +++++
 MovieVerse-Mobile/www/html/chatbot.html       |  846 ++++
 .../www/html/christopher-nolan.html           |  497 ++
 .../www/html/company-details.html             |  795 ++++
 .../www/html/create-account.html              | 1052 +++++
 .../www/html/director-details.html            |  835 ++++
 MovieVerse-Mobile/www/html/favorites.html     | 1102 +++++
 MovieVerse-Mobile/www/html/feedback.html      | 1107 +++++
 MovieVerse-Mobile/www/html/inception.html     |  521 +++
 .../www/html/leonardo-dicaprio.html           |  470 ++
 MovieVerse-Mobile/www/html/movie-details.html |  907 ++++
 MovieVerse-Mobile/www/html/movie-match.html   |  854 ++++
 .../www/html/movie-timeline.html              |  806 ++++
 MovieVerse-Mobile/www/html/movies-list.hbs    |   35 +
 MovieVerse-Mobile/www/html/notifications.html | 1329 ++++++
 MovieVerse-Mobile/www/html/offline.html       |  798 ++++
 .../www/html/privacy-policy.html              |  395 ++
 MovieVerse-Mobile/www/html/profile.ejs        |   59 +
 .../www/html/reset-password.html              | 1097 +++++
 MovieVerse-Mobile/www/html/search.html        |  921 ++++
 MovieVerse-Mobile/www/html/settings.html      | 1231 +++++
 MovieVerse-Mobile/www/html/sign-in.html       | 1077 +++++
 MovieVerse-Mobile/www/html/support.html       | 1101 +++++
 .../www/html/terms-of-service.html            |  399 ++
 MovieVerse-Mobile/www/html/trivia.html        | 1173 +++++
 MovieVerse-Mobile/www/html/tv-details.html    |  938 ++++
 MovieVerse-Mobile/www/html/user-profile.html  | 1337 ++++++
 MovieVerse-Mobile/www/index.html              |    3 -
 MovieVerse-Mobile/www/js/chat.js              |   17 +-
 MovieVerse-Mobile/www/js/chatbot.js           |  247 +-
 MovieVerse-Mobile/www/js/movie-details.js     |   11 +-
 MovieVerse-Mobile/www/js/sign-in.js           |    2 +-
 index.html                                    |    2 +-
 132 files changed, 97048 insertions(+), 730 deletions(-)
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.scss
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/navbar.scss
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/profile.scss
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/reset.css
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/style.css
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/trivia.css
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/about.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/actor-details.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/analytics.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/api_fails.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/article.hbs
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chat.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chatbot.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/christopher-nolan.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/company-details.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/create-account.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/director-details.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/favorites.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/feedback.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/inception.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/leonardo-dicaprio.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-details.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-match.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-timeline.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movies-list.hbs
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/notifications.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/offline.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/privacy-policy.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/profile.ejs
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/reset-password.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/search.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/settings.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/sign-in.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/support.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/terms-of-service.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/trivia.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/tv-details.html
 create mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/user-profile.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/css/index.scss
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/css/navbar.scss
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/css/profile.scss
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/css/reset.css
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/css/style.css
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/css/trivia.css
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/about.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/actor-details.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/analytics.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/api_fails.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/article.hbs
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/chat.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/chatbot.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/christopher-nolan.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/company-details.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/create-account.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/director-details.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/favorites.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/feedback.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/inception.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/leonardo-dicaprio.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/movie-details.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/movie-match.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/movie-timeline.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/movies-list.hbs
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/notifications.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/offline.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/privacy-policy.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/profile.ejs
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/reset-password.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/search.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/settings.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/sign-in.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/support.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/terms-of-service.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/trivia.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/tv-details.html
 create mode 100644 MovieVerse-Mobile/platforms/ios/www/html/user-profile.html
 create mode 100644 MovieVerse-Mobile/www/css/index.scss
 create mode 100644 MovieVerse-Mobile/www/css/navbar.scss
 create mode 100644 MovieVerse-Mobile/www/css/profile.scss
 create mode 100644 MovieVerse-Mobile/www/css/reset.css
 create mode 100644 MovieVerse-Mobile/www/css/style.css
 create mode 100644 MovieVerse-Mobile/www/css/trivia.css
 create mode 100644 MovieVerse-Mobile/www/html/about.html
 create mode 100644 MovieVerse-Mobile/www/html/actor-details.html
 create mode 100644 MovieVerse-Mobile/www/html/analytics.html
 create mode 100644 MovieVerse-Mobile/www/html/api_fails.html
 create mode 100644 MovieVerse-Mobile/www/html/article.hbs
 create mode 100644 MovieVerse-Mobile/www/html/chat.html
 create mode 100644 MovieVerse-Mobile/www/html/chatbot.html
 create mode 100644 MovieVerse-Mobile/www/html/christopher-nolan.html
 create mode 100644 MovieVerse-Mobile/www/html/company-details.html
 create mode 100644 MovieVerse-Mobile/www/html/create-account.html
 create mode 100644 MovieVerse-Mobile/www/html/director-details.html
 create mode 100644 MovieVerse-Mobile/www/html/favorites.html
 create mode 100644 MovieVerse-Mobile/www/html/feedback.html
 create mode 100644 MovieVerse-Mobile/www/html/inception.html
 create mode 100644 MovieVerse-Mobile/www/html/leonardo-dicaprio.html
 create mode 100644 MovieVerse-Mobile/www/html/movie-details.html
 create mode 100644 MovieVerse-Mobile/www/html/movie-match.html
 create mode 100644 MovieVerse-Mobile/www/html/movie-timeline.html
 create mode 100644 MovieVerse-Mobile/www/html/movies-list.hbs
 create mode 100644 MovieVerse-Mobile/www/html/notifications.html
 create mode 100644 MovieVerse-Mobile/www/html/offline.html
 create mode 100644 MovieVerse-Mobile/www/html/privacy-policy.html
 create mode 100644 MovieVerse-Mobile/www/html/profile.ejs
 create mode 100644 MovieVerse-Mobile/www/html/reset-password.html
 create mode 100644 MovieVerse-Mobile/www/html/search.html
 create mode 100644 MovieVerse-Mobile/www/html/settings.html
 create mode 100644 MovieVerse-Mobile/www/html/sign-in.html
 create mode 100644 MovieVerse-Mobile/www/html/support.html
 create mode 100644 MovieVerse-Mobile/www/html/terms-of-service.html
 create mode 100644 MovieVerse-Mobile/www/html/trivia.html
 create mode 100644 MovieVerse-Mobile/www/html/tv-details.html
 create mode 100644 MovieVerse-Mobile/www/html/user-profile.html

diff --git a/MovieVerse-Frontend/html/chat.html b/MovieVerse-Frontend/html/chat.html
index 438da315..4054ba67 100644
--- a/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Frontend/html/chat.html
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>
diff --git a/MovieVerse-Frontend/js/chat.js b/MovieVerse-Frontend/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Frontend/js/chat.js
+++ b/MovieVerse-Frontend/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.scss b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.scss
new file mode 100644
index 00000000..786e8d13
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.scss
@@ -0,0 +1,87 @@
+$font-family-poppins: "Poppins", sans-serif;
+$background-color-primary: #7378c5;
+$hover-color: #ff8623;
+$link-color: white;
+$link-hover-color: #f509d9;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: url("../../images/universe-1.png") no-repeat center center fixed;
+  background-size: cover;
+  font-family: $font-family-poppins;
+  margin: 0;
+  align-content: center;
+  overflow-x: hidden;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+
+%button-style {
+  background-color: $background-color-primary;
+  color: black;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  &:hover {
+    background-color: $hover-color;
+    transition: 0.3s ease-in;
+  }
+}
+
+#movie-match-btn {
+  @extend %button-style;
+  position: fixed;
+  bottom: 220px;
+  right: 20px;
+}
+
+#submit-comment {
+  @extend %button-style;
+  padding: 10px 15px;
+}
+
+%link-style {
+  color: $link-color;
+  text-decoration: underline;
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+
+#cast-info, #similar-tv, #director-link {
+  @extend %link-style;
+}
+
+@mixin modal-style {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-top: 5px;
+}
+
+.modal-header {
+  @include modal-style;
+}
+
+.comments-controls {
+  display: flex;
+  align-items: center;
+  button:disabled {
+    cursor: not-allowed;
+  }
+  &.justify-start {
+    justify-content: start;
+  }
+  &.justify-center {
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+  }
+}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/navbar.scss b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/navbar.scss
new file mode 100644
index 00000000..6ff9d8ec
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/navbar.scss
@@ -0,0 +1,97 @@
+$breakpoint-mobile: 480px;
+$breakpoint-tablet: 768px;
+$breakpoint-desktop: 1024px;
+
+$navbar-background-color: #333;
+$navbar-text-color: #fff;
+$navbar-hover-color: #555;
+$mobile-menu-background-color: #222;
+
+@mixin responsive-visibility {
+  @media (max-width: $breakpoint-mobile) {
+    display: none;
+  }
+}
+
+.navbar {
+  background-color: $navbar-background-color;
+  color: $navbar-text-color;
+  padding: 1em;
+
+  .logo {
+    float: left;
+    font-size: 1.5em;
+    margin-right: 15px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    float: right;
+
+    li {
+      display: inline;
+      margin-left: 15px;
+
+      a {
+        text-decoration: none;
+        color: $navbar-text-color;
+
+        &:hover {
+          color: $navbar-hover-color;
+        }
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-tablet) {
+    ul {
+      float: none;
+      text-align: center;
+
+      li {
+        display: block;
+        margin-top: 0.5em;
+      }
+    }
+  }
+}
+
+.mobile-menu-btn {
+  @include responsive-visibility;
+
+  display: inline-block;
+  background-color: $mobile-menu-background-color;
+  color: $navbar-text-color;
+  padding: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.mobile-menu {
+  display: none;
+
+  &.active {
+    display: block;
+    padding: 10px;
+    background-color: $mobile-menu-background-color;
+
+    ul {
+      text-align: center;
+
+      li {
+        margin-top: 10px;
+
+        a {
+          display: block;
+          color: $navbar-text-color;
+
+          &:hover {
+            background-color: $navbar-hover-color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/profile.scss b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/profile.scss
new file mode 100644
index 00000000..78f9b2e3
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/profile.scss
@@ -0,0 +1,83 @@
+$primary-color: #4A90E2;
+$secondary-color: #50E3C2;
+$text-color: #4A4A4A;
+$background-color: #F5F7FA;
+$padding-standard: 15px;
+$border-radius-standard: 5px;
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin card-style {
+  background-color: white;
+  border-radius: $border-radius-standard;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: $padding-standard;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  color: $text-color;
+  background-color: $background-color;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.profile-container {
+  @include flex-center;
+  flex-direction: column;
+}
+
+.profile-header {
+  @include flex-center;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  .profile-image {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    margin-bottom: $padding-standard;
+  }
+
+  .profile-name {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .profile-bio {
+    text-align: center;
+    margin-top: $padding-standard;
+  }
+}
+
+.profile-content {
+  @include card-style;
+  margin: 20px auto;
+  width: 90%;
+  max-width: 600px;
+
+  .section {
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    h2 {
+      border-bottom: 2px solid $primary-color;
+      padding-bottom: $padding-standard / 2;
+    }
+
+    p, ul {
+      margin-top: $padding-standard / 2;
+    }
+  }
+}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/reset.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/reset.css
new file mode 100644
index 00000000..7a836fce
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/style.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/style.css
new file mode 100644
index 00000000..f24d2b24
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/style.css
@@ -0,0 +1,4087 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-Light.ttf') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+body {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    align-content: center;
+    overflow-x: hidden;
+    min-height: 100vh;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+}
+
+#heading-href {
+    text-decoration: none;
+}
+
+.cast-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.cast-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 115px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.cast-image {
+    width: 100%;
+    height: 155px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.cast-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.cast-details {
+    width: 100%;
+}
+
+.actor-name, .actor-role {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+    white-space: normal;
+    text-align: center;
+}
+
+.actor-role {
+    font-style: italic;
+}
+
+.last-episode {
+    flex-direction: column;
+    align-items: center;
+    display: inline-block;
+}
+
+.last-episode strong {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.last-episode-image-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.last-episode-image {
+    max-width: 220px;
+    height: auto;
+    border-radius: 5px;
+}
+
+.last-episode-image:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.director-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.director-list {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.director-link {
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+
+.director-link .cast-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.director-link .cast-image {
+    width: 100%;
+    height: 155px;
+    margin-bottom: 5px;
+}
+
+.director-link .actor-name {
+    font-size: 12px;
+}
+
+.creators-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.creator-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 115px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.creator-image {
+    width: 100%;
+    height: 155px;
+    object-fit: cover !important;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.creator-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.creator-details {
+    width: 100%;
+}
+
+.creator-name {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+}
+
+#movie-match-btn {
+    position: fixed;
+    bottom: 220px;
+    right: 20px;
+    background-color: #7378c5;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#user-name {
+    font: inherit;
+    border-radius: 8px;
+}
+
+#user-comment {
+    font: inherit;
+    border-radius: 8px;
+}
+
+#submit-comment {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+}
+
+#submit-comment:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.comments-controls {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+}
+
+button:disabled {
+    cursor: not-allowed;
+}
+
+.comments-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+}
+
+#cast-info {
+    color: white;
+    text-decoration: underline;
+}
+
+#cast-info:hover {
+    color: #ff8623;
+}
+
+#similar-tv {
+    color: white;
+    text-decoration: underline;
+}
+
+#similar-tv:hover {
+    color: #ff8623;
+}
+
+#director-link {
+    color: white;
+    text-decoration: underline;
+}
+
+#director-link:hover {
+    color: #ff8623;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    margin-top: 5px;
+}
+
+#toggle-filters-btn {
+    margin: 10px;
+    background-color: #7378c5;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s ease;
+    padding: 10px 20px;
+    font: inherit;
+}
+
+#toggle-filters-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease;
+}
+
+#movie-tv-filters, #people-filters, #tv-filters {
+    max-width: 500px;
+    margin: 4px auto;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border: 2px solid #7378c5;
+    min-width: 290px;
+}
+
+#movie-tv-filters label, #movie-tv-filters select, #movie-tv-filters input[type="number"], #movie-tv-filters input[type="range"],
+#people-filters label, #people-filters select, #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters label, #tv-filters select, #tv-filters input[type="range"], #tv-filters input[type="number"] {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+    font-family: "Poppins", sans-serif;
+    color: #fff;
+}
+
+#movie-tv-filters label, #people-filters label, #tv-filters label {
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+#movie-tv-filters select, #people-filters select, #tv-filters select {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-tv-filters select:hover, #people-filters select:hover, #tv-filters select:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#movie-tv-filters select:focus, #people-filters select:focus, #tv-filters select:focus {
+    background-color: #7378c5;
+}
+
+#movie-tv-filters select:focus option:hover, #people-filters select:focus option:hover, #tv-filters select:focus option:hover {
+    background-color: #ff8623;
+}
+
+#movie-tv-filters input[type="number"], #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters input[type="range"], #tv-filters input[type="number"] {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-tv-filters input[type="number"]:hover, #people-filters input[type="range"]:hover, #people-filters input[type="number"]:hover, #tv-filters input[type="range"]:hover, #tv-filters input[type="number"]:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#reset-filters {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 25px;
+    border: none;
+    cursor: pointer;
+    color: white;
+    padding: 10px 15px;
+    margin-top: 30px;
+    display: block;
+    width: 100%;
+}
+
+#reset-filters:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#rating-filter {
+    vertical-align: top;
+}
+
+#movie-tv-filters span, #people-filters span {
+    font-weight: bold;
+    margin-left: 10px;
+}
+
+input[type=range] {
+    cursor: pointer;
+}
+
+#rating-value {
+    font: inherit;
+}
+
+.modal-header h3 {
+    flex-grow: 1;
+    text-align: center;
+    margin: 0;
+}
+
+.close {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+}
+
+#year-filter::placeholder {
+    color: white;
+}
+
+#year-tv-filter::placeholder {
+    color: white;
+}
+
+#toggle-comment-modal, #prev-page, #next-page {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    color: white;
+}
+
+#toggle-comment-modal:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#prev-page:disabled, #next-page:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+#prev-page:disabled, #next-page:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+#prev-page:hover, #next-page:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#comments-section h3 {
+    text-align: center;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    border-radius: 10px;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+p {
+    text-align: center;
+    color: #a6967e;
+}
+
+.button2 {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    right: 18px;
+    position: absolute;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+}
+
+html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
+
+.main2 {
+    text-align: center;
+    color: orange;
+    scroll-behavior: smooth;
+}
+
+.main2 p {
+    color: orange;
+}
+
+header {
+    background-color: transparent;
+    display: flex;
+    justify-content: flex-end;
+    padding: 1.5rem;
+}
+
+.search {
+    background-color: transparent;
+    border: 2px solid #121280;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    width: 250px;
+}
+
+#main {
+    align-self: center;
+    margin-left: 45px;
+}
+
+.search::placeholder {
+    color: #7378c5;
+}
+
+#search:hover {
+    outline: none;
+    background-color: #22254b;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 100px;
+    padding-top: -20px;
+}
+
+header h1 {
+    color: #ff8623;
+    text-align: center;
+}
+
+#privacy-header {
+    color: #ff8623;
+    text-align: center;
+}
+
+.highlight {
+    color: orange;
+}
+
+.highlight:hover {
+    color: #ff8623;
+}
+
+.highlight2 {
+    color: orange;
+}
+
+.highlight2:hover {
+    color: #ff8623;
+}
+
+.search:focus {
+    outline: none;
+    background-color: #22254b;
+}
+
+.about {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 130px;
+    border-radius: 8px;
+    z-index: 999;
+}
+
+.header2 {
+    text-align: center;
+    align-self: center;
+    margin-left: 500px;
+}
+
+.back-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 41px;
+    border-radius: 8px;
+    z-index: 999;
+}
+
+.movie-card {
+    display: flex;
+    background: #fff;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.movie-image {
+    width: 150px;
+    height: 225px;
+    background-size: cover;
+    background-position: center;
+}
+
+.tvSeries-info {
+    padding: 20px;
+    flex-grow: 1;
+}
+
+.green {
+    color: #4CAF50;
+}
+
+.orange {
+    color: #FF9800;
+}
+
+.red {
+    color: #ff0000;
+}
+
+#profileBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    width: 100px;
+    top: 0;
+    margin-left: 316px;
+    border-radius: 8px;
+}
+
+#profileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#mobileGoogleSignInBtn {
+    display: none;
+}
+
+#mobileProfileBtn {
+    display: none;
+}
+
+@media screen and (max-width: 900px) {
+    #mobileGoogleSignInBtn {
+        display: block;
+    }
+
+    #mobileProfileBtn {
+        display: block;
+    }
+}
+
+.back-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.movie {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+    height: 555px;
+}
+
+.tvSeries {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+    height: 555px;
+}
+
+.movie img, .tvSeries img {
+    height: 435px;
+    width: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.movie .overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+    text-align: center;
+}
+
+.tvSeries .overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.tvSeries-info h3 {
+    margin: 0;
+}
+
+.tvSeries:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.tvSeries-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.tvSeries-info span.green {
+    color: rgb(39,189,39);
+}
+
+.movie-info span.green {
+    color: rgb(39,189,39);
+}
+
+.tvSeries-info span.orange {
+    color: orange;
+}
+
+.movie-info span.orange {
+    color: orange;
+}
+
+.tvSeries-info span.red {
+    color: rgb(189,42,42);
+}
+
+.movie-info span.red {
+    color: rgb(189,42,42);
+}
+
+.overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.movie:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.overview h4 {
+    margin-top: 0;
+}
+
+.genres {
+    align-self: center;
+    margin-left: 15px;
+    color: #ff8623;
+}
+
+#other1:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.circle-text {
+    font-size: 25px;
+    font-weight: bold;
+    dominant-baseline: middle;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.about:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+#my-heading1 {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards 0.5s;
+}
+
+#trivia-btn {
+    position: fixed;
+    bottom: 60px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#trivia-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.button2:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#discussions-btn {
+    position: fixed;
+    bottom: 100px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#discussions-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-of-the-day-btn {
+    position: fixed;
+    bottom: 140px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#loadMoreButton {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    color: white;
+    margin-top: 20px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#loadMoreButton:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-of-the-day-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-of-the-day-btn2 {
+    position: fixed;
+    bottom: 80px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-of-the-day-btn2:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#button-search {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#button-search:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.details-container {
+    display: flex;
+    height: calc(100% - 60px);
+    color: white;
+    overflow-y: auto;
+    align-items: start;
+}
+
+.movie-left, .movie-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.actor-left, .actor-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 20px;
+}
+
+.director-left, .director-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 20px;
+}
+
+#actor-name {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    margin-top: -10px;
+}
+
+.movie-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.movie-left img {
+    height: auto;
+}
+
+.actor-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.director-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.movie-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    height: 100%;
+}
+
+.actor-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-top: 70px;
+}
+
+.director-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-top: 40px;
+}
+
+.movie-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+    margin-right: 5px;
+}
+
+.movie-link:hover {
+    color: #ff8623;
+}
+
+.movie-image {
+    width: 100%;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+@media (max-width: 768px) {
+    .movie-image {
+        height: auto;
+    }
+    #actor-image {
+        height: auto;
+    }
+}
+
+.movie-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.actor-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#rating {
+    color: inherit;
+}
+
+#rating:hover {
+    color: #ff8623;
+}
+
+#metacritics {
+    color: inherit;
+}
+
+#metacritics:hover {
+    color: #ff8623;
+}
+
+.director-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.adult-indicator {
+    color: red;
+    font-weight: bold;
+}
+
+.general-indicator {
+    color: green;
+    font-weight: bold;
+}
+
+.movie-description {
+    font-size: 1rem;
+    color: white;
+    width: 100%;
+}
+
+.companies-section {
+    margin-top: 20px;
+}
+
+.companies-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.company-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+@media (max-width: 768px) {
+    .company-item {
+        max-width: 125px;
+    }
+}
+
+.company-logo {
+    max-width: 100px;
+    max-height: 75px;
+    height: auto;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.company-item:hover {
+    transform: scale(1.07);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.company-details {
+    width: 100%;
+}
+
+.company-name {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+    white-space: normal;
+    text-align: center;
+}
+
+.actor-description {
+    font-size: 1rem;
+    color: white;
+    transform: translateY(10%);
+}
+
+.director-description {
+    font-size: 1rem;
+    color: white;
+    transform: translateY(10%);
+}
+
+.streaming-logo {
+    display: inline-flex;
+    align-items: flex-end;
+    vertical-align: bottom;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.streaming-logo img {
+    width: 50px;
+    margin-left: 10px;
+    transition: transform 0.3s ease;
+}
+
+.streaming-logo:hover {
+    transform: scale(1.1);
+    cursor: pointer;
+}
+
+.movie-rating {
+    margin-top: 100px;
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#user-ratings {
+    color: inherit;
+}
+
+#user-ratings:hover {
+    color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+#userRatings {
+    color: inherit;
+}
+
+#userRatings:hover {
+    color: #ff8623;
+}
+
+#githubLink {
+    color: white !important;
+}
+
+#githubLink1 {
+    color: black !important;
+}
+
+#githubLink1:hover {
+    color: #ff8623 !important;
+    transition: 0.1s ease-in;
+}
+
+#githubLink2 {
+    color: white !important;
+}
+
+#githubLink2: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;
+}
+
+.modal-overlay {
+    display: none;
+    position: fixed;
+    z-index: 100000000002;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-visible {
+    display: flex !important;
+}
+
+.pin-btn {
+    color: #ff8623;
+}
+
+.pin-btn:hover {
+    color: #c45c00;
+}
+
+.pin-btn.pinned {
+    color: #7378c5;
+}
+
+.spinner {
+    border: 4px solid #000;
+    border-radius: 50%;
+    border-top: 5px solid #ff8623;
+    width: 100px;
+    height: 100px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+#githubLink:hover {
+    color: #ff8623 !important;
+    transition: 0.1s ease-in;
+}
+
+#imdbRating, #rtRating {
+    text-decoration: none;
+    color: inherit;
+    font-size: 2.5rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#imdbRating:hover {
+    color: #ff8623;
+}
+
+#rtRating:hover {
+    color: #ff8623;
+}
+
+#movie-rating h2:hover {
+    color: initial;
+}
+
+h2 {
+    font-size: 1.74rem;
+}
+
+h2:hover {
+    color: orange;
+    transition: 0.1s linear;
+}
+
+p {
+    color: white;
+}
+
+.similar-movies-container h3 {
+    color: #E0E0E0;
+}
+
+.similar-movies span:hover {
+    text-decoration: none;
+    opacity: 0.8;
+    color: #ff8623;
+}
+
+.movie-details-body {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: repeat;
+}
+
+.movie-details-body2 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-position: center;
+    height: 100vh;
+    background-size: auto;
+    background-repeat: repeat;
+}
+
+.movie-details-body3 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+
+.movie-details-body4 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+
+.favorites-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 219px;
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+    z-index: 999;
+    max-width: 95px;
+}
+
+#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;
+}
+
+#searchContainer {
+    position: relative;
+    display: inline-block;
+}
+
+#averageDisplays {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+    width: 100%;
+}
+
+.progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    flex: 1;
+    text-align: center;
+}
+
+.progress-ring {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.progress-ring__circle {
+    fill: transparent;
+    stroke-width: 10;
+    stroke: #fff;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+}
+
+.progress-ring__progress {
+    fill: transparent;
+    stroke-width: 10;
+    stroke: var(--progress-color);
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    transition: stroke-dashoffset 0.6s ease-out;
+}
+
+.progress-ring__text {
+    font-size: 20px;
+    dominant-baseline: middle;
+    text-anchor: middle;
+    opacity: 0;
+    transition: opacity 0.6s ease-out;
+}
+
+strong {
+    font-weight: bold;
+}
+
+.favorites-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#favorite-btn {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: grey;
+    margin-left: 10px;
+    border-radius: 8px;
+    width: 40px;
+    box-shadow: none;
+    position: relative;
+    cursor: pointer;
+}
+
+#favorite-btn:hover {
+    background-color: #dcdcdc;
+}
+
+.tooltip-text {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 10%;
+    margin-left: -90px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.title-favorites-container {
+    display: flex;
+    align-items: center;
+    overflow: visible;
+}
+
+#favorite-btn.favorited {
+    color: red;
+}
+
+#favorites-main {
+    margin-left: 15px;
+}
+
+#favorite-btn:hover::after {
+    content: "Favorite / Unfavorite";
+    position: absolute;
+    top: -45px;
+    left: 50%;
+    width: 55px;
+    transform: translateX(-70%);
+    background-color: #232323;
+    color: white;
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 12px;
+    pointer-events: none;
+    z-index: 10;
+}
+
+#main2 {
+    text-align: center;
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+    margin-bottom: 300px;
+}
+
+#main2 h2, #main2 h3 {
+    color: #ff8623;
+    margin-bottom: 20px;
+}
+
+#aboutHeader {
+    margin-top: -25px;
+}
+
+#main2 p, #main2 ul, #main2 li {
+    text-align: left;
+    margin: auto;
+    max-width: 800px;
+    color: #ff8623;
+}
+
+#main2 ul {
+    list-style: none;
+    padding: 0;
+}
+
+#main2 li {
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: black;
+    align-items: center;
+}
+
+#main2 li:hover {
+    background-color: #e6e6e6;
+}
+
+#main2 a {
+    color: #7378c5;
+    text-decoration: none;
+}
+
+#main2 a:hover {
+    text-decoration: underline;
+}
+
+.app-link {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.app-link button {
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px 15px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: black;
+    cursor: pointer;
+    font-size: 16px;
+    display: block;
+    width: auto;
+    margin: 10px auto;
+}
+
+.app-btn {
+    background-color: #7378c5;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px 15px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: white;
+    cursor: pointer;
+    font: inherit;
+    display: block;
+    width: auto;
+    margin: 10px auto;
+    transition: 0.1s ease-in;
+}
+
+.clock {
+    text-align: center;
+    font-size: 20px;
+    color: #ff8623;
+}
+
+.clock:hover {
+    color: #ff8623;
+}
+
+#time-label {
+    color: #ff8623;
+}
+
+#time-label:hover {
+    color: #ff8623;
+}
+
+.app-btn:hover {
+    background-color: #ff8623;
+}
+
+.app-link button:hover {
+    background-color: #e6e6e6;
+}
+
+.app-link p {
+    margin-top: 10px;
+    color: white;
+}
+
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-container {
+    text-align: center;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#trailerButton {
+    color: #fff;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#trailerButton:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.trailer-button {
+    display: block;
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+    font-size: 1rem;
+}
+
+.trailer-button:hover {
+    background-color: #ff8623;
+}
+
+.cast-container {
+    margin-top: 20px;
+}
+
+.actor {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor:hover {
+    color: #0056b3;
+}
+
+.actor-item {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor-item:hover {
+    color: #0056b3;
+}
+
+.cast-container {
+    margin-top: 20px;
+}
+
+.actor-link {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor-link:hover {
+    color: #0056b3;
+}
+
+.cast-list {
+    white-space: nowrap;
+    overflow-x: auto;
+    margin-top: 10px;
+}
+
+.actor-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.watchlist-buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 60px;
+    margin-left: 30px;
+}
+
+.watchlist-buttons-container button {
+    margin: 0 10px;
+    background-color: #7378c5;
+    font: inherit;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.1s ease-in;
+}
+
+#button {
+    margin: 0 10px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.1s ease-in;
+}
+
+#button:hover {
+    background-color: #ff8623;
+}
+
+.watchlist-buttons-container button:hover {
+    background-color: #ff8623;
+}
+
+#search-container {
+    display: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 8px;
+    color: white;
+    margin: 10px;
+}
+
+#movie-match-container1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0;
+    padding: 0;
+    top: 0;
+    margin: 0;
+}
+
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.checkbox-container label {
+    margin-top: 6px;
+}
+
+.active-category {
+    background-color: #ff8623;
+    color: white;
+}
+
+.nav-button {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.nav-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#menu-btn {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+    font-size: 14px;
+    z-index: 1000000002 !important;
+}
+
+#menu-btn i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+#menu-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#settings-container {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 32px;
+    color: white;
+    margin: 5px auto;
+    max-width: 500px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+@media (max-width: 700px) {
+    #settings-container {
+        max-width: calc(100% - 10px);
+        margin: 10px 10px;
+    }
+}
+
+#chat-button,
+#settings-btn,
+#movie-of-the-day-btn,
+#movie-match-btn,
+#movie-match-btn3,
+#movie-timeline-btn,
+#discussions-btn,
+#trivia-btn,
+#back-to-top-btn {
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    transform: translateY(20px);
+    opacity: 0;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #movie-match-btn3,
+    #trivia-btn,
+    #back-to-top-btn {
+        position: fixed;
+        right: 10px;
+        z-index: 1000;
+    }
+
+    #menu-btn {
+        display: block;
+    }
+}
+
+.mobile-bottom-bar {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: auto;
+    background-color: #7378c5;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+    justify-content: space-around;
+    align-items: center;
+    z-index: 100000222;
+    transition: transform 0.09s ease-in-out;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+}
+
+.hide-bar {
+    transform: translateY(100%);
+}
+
+.mobile-bottom-bar a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    text-align: center;
+    color: white;
+    text-decoration: none;
+    padding: 6px 0;
+    width: 15%;
+}
+
+.mobile-bottom-bar a:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.mobile-bottom-bar i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+.mobile-bottom-bar span {
+    display: block;
+    font-size: 10px;
+    color: #ecf0f1;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #trivia-btn,
+    #menu-btn,
+    #back-to-top-btn {
+        display: none;
+    }
+}
+
+.nav-button:disabled {
+    background-color: #b5b5b5;
+    cursor: not-allowed;
+}
+
+.search-users-container {
+    text-align: center;
+    margin: 20px auto;
+    background-color: rgba(55, 59, 105, 0.8);
+    padding: 15px;
+    border-radius: 8px;
+    max-width: 500px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    color: white;
+    font: inherit;
+}
+
+.search-users-container input[type="text"] {
+    width: 70%;
+    padding: 10px;
+    margin-right: 10px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    font: inherit;
+}
+
+.search-users-container button {
+    padding: 10px 20px;
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font: inherit;
+}
+
+.search-users-container button:hover {
+    background-color: #ff8623;
+}
+
+.search-results-container {
+    display: none;
+    background-color: rgba(211, 211, 211, 0.5);
+    max-width: 500px;
+    margin: 10px auto;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    text-align: left;
+}
+
+#viewMyProfileBtn {
+    display: block;
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 20px;
+    margin: 20px auto;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font: inherit;
+}
+
+#viewMyProfileBtn:hover {
+    background-color: #ff8623;
+}
+
+.user-search-result {
+    background-color: rgba(55, 59, 105, 0.8);
+    margin: 10px auto;
+    padding: 10px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    color: white;
+    transition: background-color 0.3s ease;
+    height: 100px;
+    max-width: 400px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.user-search-result:hover {
+    background-color: #ff8623;
+}
+
+.user-search-result img {
+    width: auto;
+    height: 95%;
+    max-height: 100px;
+    margin-right: 10px;
+    border-radius: 8px;
+    object-fit: contain;
+}
+
+#userLink {
+    color: black;
+}
+
+#userLink:hover {
+    color: #ff710d;
+}
+
+#chat-button {
+    background-color: #7378c5;
+    bottom: 325px;
+    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);
+}
+
+#chat-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+.user-search-result div {
+    width: 67%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: left;
+}
+
+.user-search-result strong {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.user-search-result p {
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.pagination {
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    padding: 10px;
+    margin: 10px;
+    text-align: center;
+}
+
+@media (max-width: 767px) {
+    .genres + main + .pagination {
+        text-align: center;
+    }
+
+    .pagination {
+        position: relative;
+        width: calc(100% - 20px);
+        margin-top: 20px;
+    }
+}
+
+.page-button {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    margin: 2px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    font: inherit;
+    font-size: 12.9px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.page-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.page-button.active {
+    background-color: #4a4e8c;
+}
+
+.page-button:disabled {
+    background-color: #b5b5b5;
+    cursor: default;
+}
+
+#search-results-label {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#search-results-label:hover {
+    color: #ff8623;
+}
+
+.category-buttons button {
+    background-color: #7378c5;
+    font: inherit;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    margin: 10px;
+    transition: 0.1s ease-in;
+}
+
+.category-buttons button:hover {
+    background-color: #534caf;
+}
+
+.watchlist {
+    background-color: rgba(255, 255, 255, 0.1);
+    margin: 10px;
+    padding: 15px;
+    border-radius: 8px;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+
+.watchlist-title {
+    font-size: 1.5rem;
+    color: #ff8623;
+    text-align: center;
+}
+
+.watchlist-description {
+    font-size: 1rem;
+    margin-bottom: 10px;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+    background-color: #373b69;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 50%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+}
+
+.modal-content h2 {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.modal-content label {
+    color: #fff;
+    margin-bottom: 10px;
+    display: block;
+}
+
+.modal-content input[type="text"],
+.modal-content textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #7378c5;
+    background-color: #22254b;
+    color: #fff;
+}
+
+.modal-content button {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font: inherit;
+    display: block;
+    margin: 10px auto;
+    transition: background-color 0.3s ease;
+}
+
+.modal-content select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #7378c5;
+    background-color: #22254b;
+    color: #fff;
+}
+
+.modal-content button:hover {
+    background-color: #ff8623;
+}
+
+.modal-content {
+    position: relative;
+    background-color: #373b69;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 50%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+}
+
+.modal-content h2 {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.modal-content .close-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: #fff;
+    cursor: pointer;
+}
+
+.modal-content label {
+    color: #fff;
+    margin-bottom: 10px;
+    display: block;
+}
+
+#subheading:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#aboutHeader:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#profileLink {
+    color: white !important;
+    text-decoration: underline !important;
+}
+
+#profileLink:hover {
+    color: #ff8623 !important;
+    transition: 0.1s linear;
+}
+
+textarea {
+    resize: none;
+}
+
+.close-button {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close-button:hover {
+    color: #ff8623;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: #ff8623;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.actor-link:hover {
+    color: #ff8623;
+}
+
+.genres {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#discussion-input {
+    background-color: transparent;
+    border: 2px solid #ff8623;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+}
+
+#discussion-input:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#post-btn {
+    background-color: #ff8623;
+    font: inherit;
+}
+
+#post-btn:hover {
+    background-color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+ol li:hover {
+    color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+#chatbotContainer {
+    width: 95%;
+    max-width: 600px;
+    background-color: rgba(0, 0, 0, 0.7);
+    margin: 20px auto;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#chatbotHeader {
+    background-color: #ff8623;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    border-radius: 8px;
+    margin-top: 10px;
+}
+
+#chatbotBody {
+    overflow-y: auto;
+    max-height: 300px;
+    padding: 10px;
+    border-radius: 8px;
+    color: white;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    margin-top: 10px;
+    border: 1px solid #ff8623;
+}
+
+#sendButton {
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    color: white;
+    background-color: #ff8623;
+    border: none;
+    cursor: pointer;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#sendButton:hover {
+    background-color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+#chatbotInput {
+    width: 100%;
+    padding: 10px 20px;
+    border: 1px solid #ff8623;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    background-color: transparent;
+    color: white;
+    margin-top: 10px;
+    box-sizing: border-box;
+}
+
+.highlight1 {
+    color: orange;
+}
+
+#chatbotInput:focus {
+    outline: none;
+}
+
+#bot-header {
+    text-align: center;
+    width: 100%;
+}
+
+#chatbotBody > div {
+    margin-bottom: 10px;
+    padding: 5px 10px;
+    border-radius: 5px;
+}
+
+@media (max-width: 705px) {
+    #search-title,
+    #alt-title {
+        display: none;
+    }
+}
+
+@media (max-height: 930px) {
+    #search-title,
+    #alt-title {
+        display: none;
+    }
+}
+
+#chatbotBody > div[text-align="right"] {
+    background-color: #ff8623;
+    align-self: flex-end;
+}
+
+#chatbotBody > div[text-align="left"] {
+    background-color: #7378c5;
+    align-self: flex-start;
+}
+
+@media (max-width: 767px) {
+    #chatbotContainer {
+        top: 56.1%
+    }
+}
+
+#change-director-btn {
+    padding: 5px 10px;
+    cursor: pointer;
+    border: none;
+    background-color: #7378c5;
+    font: inherit;
+    color: #000000;
+    border-radius: 8px;
+}
+
+#movie-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#movie-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#actor-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#actor-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#director-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#director-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#company-logo {
+    z-index: 100000000;
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#rating-link {
+    color: white;
+}
+
+#rating-link:hover {
+    color: #ff8623;
+}
+
+#company-logo:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#change-director-btn:hover {
+    background-color: #ff8623;
+}
+
+#trailerContainer {
+    width: 560px;
+    height: 315px;
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+}
+
+#removeBtn {
+    color: white;
+}
+
+#removeBtn:hover {
+    color: #ff8623;
+}
+
+.director-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.director-link:hover {
+    color: #ff8623;
+}
+
+@media (max-width: 982px) {
+    #local-time {
+        display: none;
+    }
+}
+
+#custom-bg-upload {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid #7378c5;
+    background-color: #22254b;
+    color: white;
+    font-size: 16px;
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+#movie-details-container {
+    margin-top: 10px;
+}
+
+#custom-bg-name {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid #7378c5;
+    background-color: #22254b;
+    color: white;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+#upload-bg-btn {
+    background-color: #ff8623;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    font-size: 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 20px auto;
+    display: block;
+}
+
+.chart-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 20px;
+    justify-content: center;
+}
+
+.chart-box {
+    background-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+    width: 100%;
+    max-width: 600px;
+    height: 400px;
+    margin: 20px auto;
+    opacity: 1;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 900px) {
+    .chart-container {
+        flex-direction: column;
+    }
+
+    .chart-box {
+        height: auto;
+    }
+}
+
+#ratingImdb {
+    color: #ff710d;
+    font-size: 17px;
+}
+
+#ratingImdb:hover {
+    color: #ff8623;
+}
+
+.chart-title {
+    text-align: center;
+    color: #ff710d;
+    margin-bottom: 15px;
+}
+
+#descriptionP {
+    margin-top: -10px;
+}
+
+#upload-bg-btn:hover {
+    background-color: #7378c5;
+    transition: background-color 0.3s ease;
+}
+
+#settings-btn {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#settings-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+@media (max-width: 1000px) {
+    #comments-section {
+        margin-bottom: 210px;
+    }
+}
+
+#local-time {
+    transform: translateX(10%);
+    padding: 10px;
+    border-radius: 10px;
+    z-index: 10;
+}
+
+#mobileProfileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+@media (max-width: 800px) {
+    #my-heading {
+        margin-left: 0;
+    }
+
+    #movie-details-body3 {
+        background-image: url("https://movie-verse.com/images/universe-1.webp");
+        background-position: center;
+        height: 100vh;
+        background-size: auto;
+        background-repeat: repeat;
+        width: 100vw;
+    }
+
+    #profileBtn {
+        display: none;
+    }
+
+    #indexLink {
+        margin-bottom: -15px;
+    }
+
+    .back-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: -180px;
+        border-radius: 8px;
+    }
+
+    .about {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 0;
+        border-radius: 8px;
+    }
+
+    .favorites-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        width: 95px;
+        margin-left: 188px;
+        border-radius: 8px;
+        padding-left: 10px;
+        padding-right: 10px;
+        box-sizing: border-box;
+    }
+
+    #googleSignInBtn {
+        display: none;
+    }
+
+    .movie-details-body {
+        min-height: 100% !important;
+    }
+
+    .movie-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .actor-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .director-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .details-container {
+        flex-direction: column;
+    }
+
+    #movie-details-container {
+        margin-top: 15px;
+    }
+
+    .movie-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .actor-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .director-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .movie-left, .movie-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .actor-left, .actor-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .director-left, .director-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .movie-right {
+        margin-top: 0;
+        height: 100% !important;
+        overflow: visible;
+        margin-bottom: 5px;
+    }
+
+    #descriptionP {
+        margin-top: -100px;
+    }
+
+    .actor-right {
+        margin-top: -20px;
+        height: 100% !important;
+        overflow: visible;
+    }
+
+    .director-right {
+        margin-top: -20px;
+        height: 100% !important;
+        overflow: visible;
+    }
+
+    header {
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    main {
+        margin-bottom: -40px;
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #clear-search-btn {
+        margin-top: 5px;
+    }
+
+    .watchlist-buttons-container {
+        margin-left: -3px;
+    }
+
+}
+
+.year-input-container {
+    margin: 20px;
+}
+
+.year-input {
+    width: 150px;
+    padding: 10px;
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+}
+
+#load-movies {
+    padding: 10px 10px;
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#load-movies:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.movie-card {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+}
+
+#form {
+    margin-top: 20px;
+}
+
+#form1 {
+    margin-top: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.movie-card img {
+    width: 100%;
+}
+
+.movie-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+    padding-top: 14px;
+    flex-grow: 1;
+}
+
+.tvSeries-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+}
+
+.movie-info h3 {
+    margin: 0;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.timeline-container {
+    margin: 20px auto;
+    background-color: rgba(255,255,255,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    width: calc(100% - 24px);
+    border-radius: 16px;
+    margin-top: 50px;
+    text-align: center;
+}
+
+#movie-timeline-btn {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    cursor: pointer;
+}
+
+#movie-timeline-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movies-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+    flex-direction: column;
+}
+
+#tvseries-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+    flex-direction: column;
+}
+
+#tvseries-container .movie-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+#movies-container1 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+#movies-container .movie-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.movies-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.center-container {
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+.center-container1 {
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+#load-movies {
+    cursor: pointer;
+    font: inherit;
+}
+
+#select-text {
+    margin-top: 30px;
+    color: #ff8623;
+}
+
+#select-text:hover {
+    color: #ff8623;
+}
+
+#clear-search-btn {
+    background-color: #7378c5;
+    color: black;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 10px;
+    font: inherit;
+    margin-right: 20px;
+}
+
+#clear-search-btn:hover {
+    background-color: #ff8623;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+    body {
+        background-size: auto;
+        background-repeat: repeat;
+    }
+}
+
+#search-title {
+    color: #ff8623;
+    text-align: center;
+    font-size: 1.74rem;
+    margin-bottom: 20px;
+}
+
+#search-title:hover {
+    color: #ff8623;
+}
+
+#search-title1 {
+    color: #ff8623;
+    text-align: center;
+    font-size: 1.74rem;
+    margin-bottom: 20px;
+}
+
+#search-title1:hover {
+    color: #ff8623;
+}
+
+#movie-match-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    margin-top: 60px;
+    padding: 20px;
+    width: 100%;
+    margin-bottom: 300px;
+}
+
+.profile-container {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.profile-image-container img {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.profile-info p {
+    margin: 10px 0;
+}
+
+body {
+    overflow-x: hidden;
+    max-width: 100%;
+}
+
+#googleSignInBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 420px;
+    border-radius: 8px;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+.mobile-sign-in-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 12px;
+    margin-bottom: 10px;
+}
+
+#mobileGoogleSignInBtn {
+    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;
+}
+
+#mobileProfileBtn {
+    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;
+}
+
+#mobileGoogleSignInBtn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+.movie-match-container {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#movie-match-form {
+    background-color: transparent;
+    border: 2px solid #7378c5;
+    border-radius: 50px;
+    padding: 20px;
+    max-width: 500px;
+    margin: auto;
+}
+
+#movie-match-form label, #movie-match-form select, #movie-match-form input[type="submit"] {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+    font-family: "Poppins", sans-serif;
+    color: #fff;
+}
+
+#movie-match-form label {
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+#movie-match-form select {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-match-form input[type="submit"] {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 25px;
+    border: none;
+    cursor: pointer;
+    color: white;
+    padding: 10px 15px;
+    margin-top: 30px;
+}
+
+#movie-match-form input[type="submit"]:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#movie-match-btn2 {
+    position: fixed;
+    bottom: 115px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn2:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-match-btn3 {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn3:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-match-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.company-left, .company-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-align: center;
+}
+
+.company-left {
+    width: 33.33%;
+}
+
+.company-right {
+    width: 66.67%;
+}
+
+#company-movies-list {
+    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 10px;
+}
+
+#company-movies-list span {
+    margin: 0;
+}
+
+.company-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.company-link:hover {
+    color: #ff8623;
+}
+
+.title-logo-container {
+    text-align: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.company-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.company-description {
+    margin-top: 20px;
+}
+
+.company-description, #company-headquarters, #company-country, #company-website {
+    color: white;
+    margin-bottom: 10px;
+}
+
+#company-website:hover {
+    color: #ff8623;
+}
+
+.movies-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.movies-list a {
+    color: white;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.movies-list a:hover {
+    color: purple;
+}
+
+@media (max-width: 800px) {
+    .company-details-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .company-left {
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .company-right {
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .company-left img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+#button-clear {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 15px;
+    font: inherit;
+    cursor: pointer;
+    margin-left: 10px;
+    color: #000000;
+    margin-right: 40px;
+}
+
+#rating-value:hover {
+    color: #ff8623;
+}
+
+#button-clear:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.rating {
+    display: flex;
+    justify-content: flex-end;
+    direction: rtl;
+    color: grey;
+    font-size: 20px;
+}
+
+.rating .star {
+    color: white;
+    cursor: pointer;
+    transition: color 200ms;
+}
+
+.rating .star:hover,
+.rating .star:hover ~ .star {
+    color: gold;
+}
+
+@keyframes shake {
+    0% { transform: translateX(0); }
+    20% { transform: translateX(-5px); }
+    40% { transform: translateX(5px); }
+    60% { transform: translateX(-5px); }
+    80% { transform: translateX(5px); }
+    100% { transform: translateX(0); }
+}
+
+.shake-animation {
+    animation: shake 0.5s ease-in-out 5;
+}
+
+.search-results {
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+#form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+}
+
+#search-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.search-result-card {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #7378c5;
+    margin-bottom: 2px;
+    margin-top: 5px;
+    width: 300px;
+    color: #212121;
+}
+
+.search-result-card:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.buttons-container button {
+    padding-left: 20px;
+}
+
+#clear-search {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    padding: 5px 10px;
+    margin-top: 10px;
+    margin-left: 20px;
+}
+
+#clear-search:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#view-all-results {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    margin-top: 10px;
+}
+
+#view-all-results:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.result-image {
+    width: 64px;
+    height: 96px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.result-details {
+    margin-left: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+.result-name {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.result-type {
+    font-size: 14px;
+    font-style: italic;
+    color: #212121;
+}
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+    color: white;
+    transition: 0.3s ease-in;
+}
+
+#footer:hover {
+    cursor: pointer;
+}
+
+.notification-btn {
+    position: fixed;
+    top: 5px;
+    right: 20px;
+    z-index: 100;
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    cursor: pointer;
+    padding: 9px;
+    border-radius: 8px;
+    transition: 0.1s ease-in;
+}
+
+#closeModalButton {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    text-align: center;
+    transition: 0.1s ease-in;
+}
+
+#closeModalButton:hover {
+    background-color: #ff8623;
+}
+
+#closeModalButton {
+    margin: 10px auto;
+    display: block;
+}
+
+.notification-btn:hover {
+    background-color: #ff8623;
+}
+
+.notification-modal {
+    position: fixed;
+    top: 50px;
+    right: 20px;
+    background-color: #7378c5;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    padding: 20px;
+    width: 300px;
+    z-index: 1002;
+    color: white;
+}
+
+@media (max-width: 900px) {
+    .notification-modal {
+        right: 12.5px;
+    }
+
+    .notification-btn {
+        right: 12.5px;
+    }
+}
+
+.notification-link:hover {
+    color: #ff8623 !important;
+}
+
+.notification-modal h4 {
+    margin: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.notification-modal ul {
+    list-style: none;
+    padding: 0;
+    margin-top: 10px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.notification-modal ul li {
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+}
+
+#comments-section {
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px 0;
+    max-width: calc(100% - 20px);
+}
+
+@keyframes dropIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: dropIn 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1s;
+}
+
+#local-time {
+    cursor: pointer;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1.5s;
+}
+
+#local-time p,
+#local-time div {
+    opacity: 0;
+    animation: dropIn 1s ease forwards 2s;
+}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/trivia.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/trivia.css
new file mode 100644
index 00000000..6a40c7c3
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/trivia.css
@@ -0,0 +1,1157 @@
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+}
+
+#footerP {
+    color: white !important;
+}
+
+#footerP:hover {
+    transition: 0.1s ease-in;
+    color: #ff8623 !important;
+}
+
+@media (max-width: 900px) {
+    #local-time {
+        display: none;
+    }
+}
+
+body {
+    color: #ff903a;
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    align-content: center;
+    text-align: center;
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
+
+#profileBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    width: 100px;
+    top: 0;
+    margin-left: 316px;
+    border-radius: 8px;
+}
+
+#profileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-results {
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    margin: 0 auto;
+    align-items: center;
+}
+
+#form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+}
+
+.search-result-card {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #7378c5;
+    margin: 0;
+    margin-bottom: 2px;
+    margin-top: 5px;
+    width: 300px;
+    color: #212121;
+}
+
+.search-result-card:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.buttons-container button {
+    padding-left: 20px;
+}
+
+#clear-search {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    padding: 5px 10px;
+    margin-top: 10px;
+    margin-left: 20px;
+}
+
+#clear-search:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#view-all-results {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    margin-top: 10px;
+}
+
+#view-all-results:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.result-image {
+    width: 64px;
+    height: 96px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.result-details {
+    margin-left: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+.result-name {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.result-type {
+    font-size: 14px;
+    font-style: italic;
+    color: #212121;
+}
+
+#googleSignInBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 420px;
+    border-radius: 8px;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+#googleSignInBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+}
+
+#submit {
+    background-color: #7378c5;
+    font: inherit;
+    margin-bottom: 39px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#submit:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+#regenerate-questions {
+    background-color: #7378c5;
+    font: inherit;
+    margin-bottom: 39px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#regenerate-questions:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-timeline-btn {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-timeline-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-of-the-day-btn {
+    position: fixed;
+    bottom: 140px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-of-the-day-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#discussions-btn {
+    position: fixed;
+    bottom: 100px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#discussions-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+p {
+    text-align: center;
+    color: #ff8623;
+}
+
+.highlight:hover {
+    color: #ff8623;
+}
+
+.button2 {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    right: 18px;
+    position: absolute;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+.main2 {
+    text-align: center;
+    color: orange;
+    scroll-behavior: smooth;
+}
+
+.main2 p {
+    color: orange;
+}
+
+header {
+    background-color: transparent;
+    display: flex;
+    justify-content: flex-end;
+    padding: 1.5rem;
+}
+
+.search {
+    background-color: transparent;
+    border: 2px solid #121280;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    width: 400px;
+}
+
+#main {
+    align-self: center;
+}
+
+.search::placeholder {
+    color: #7378c5;
+}
+
+#search:hover {
+    outline: none;
+    background-color: #22254b;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 100px;
+    padding-top: -20px;
+}
+
+header h1 {
+    color: #ff8623;
+    text-align: center;
+}
+
+.highlight {
+    color: orange;
+}
+
+.search:focus {
+    outline: none;
+    background-color: #22254b;
+}
+
+.about {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 130px;
+    border-radius: 8px;
+}
+
+.header2 {
+    text-align: center;
+    align-self: center;
+    margin-left: 500px;
+}
+
+.back-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 41px;
+    border-radius: 8px;
+}
+
+.back-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.movie {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+}
+
+.movie img {
+    width: 100%;
+}
+
+.movie-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+}
+
+.movie-info h3 {
+    margin: 0;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.movie-info span.green {
+    color: rgb(39,189,39);
+}
+
+.movie-info span.orange {
+    color: orange;
+}
+
+.movie-info span.red {
+    color: rgb(189,42,42);
+}
+
+.overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.movie:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.overview h4 {
+    margin-top: 0;
+}
+
+.genres {
+    align-self: center;
+    margin-left: 15px;
+    color: #ff8623;
+}
+
+#other1:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#movie-match-btn3 {
+    position: fixed;
+    bottom: 220px;
+    right: 20px;
+    background-color: #7378c5;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+}
+
+#movie-match-btn3:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.about:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    background-color: #7378c5;
+    margin: 15% auto;
+    padding: 20px;
+    width: 80%;
+    max-width: 450px;
+    text-align: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    border-radius: 8px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+}
+
+.modal-content {
+    text-align: center;
+}
+
+.close-button {
+    cursor: pointer;
+    position: relative;
+    top: -2px;
+    font-size: 25px;
+    color: #aaa;
+    font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: red;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.progress-circle {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background: conic-gradient(green 0%, green var(--progress, 0%), red var(--progress, 0%), red 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 20px auto;
+    transition: stroke-dashoffset 0.5s ease-out;
+}
+
+.progress-circle::after {
+    content: '';
+    width: 130px;
+    height: 130px;
+    background: white;
+    border-radius: 50%;
+    display: block;
+}
+
+#correct-answers {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+#result-text {
+    text-align: center;
+    font-size: 20px;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+.favorites-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 219px;
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+}
+
+.favorites-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#favorite-btn {
+    background: transparent;
+    color: grey;
+    margin-left: 10px;
+    border-radius: 8px;
+    width: 40px;
+    box-shadow: none;
+    position: relative;
+    cursor: pointer;
+}
+
+#favorite-btn:hover {
+    background-color: #dcdcdc;
+}
+
+#button-search {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#button-search:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+#settings-btn {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#settings-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+#menu-btn {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+    font-size: 14px;
+}
+
+#menu-btn i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+#menu-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#chat-button {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#chat-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+
+#chat-button,
+#settings-btn,
+#movie-of-the-day-btn,
+#movie-match-btn,
+#movie-match-btn3,
+#movie-timeline-btn,
+#discussions-btn,
+#trivia-btn,
+#back-to-top-btn {
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    transform: translateY(20px);
+    opacity: 0;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #movie-match-btn3,
+    #trivia-btn,
+    #back-to-top-btn {
+        position: fixed;
+        right: 10px;
+        z-index: 1000;
+    }
+
+    #menu-btn {
+        display: block;
+    }
+}
+
+.mobile-bottom-bar {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: auto;
+    background-color: #7378c5;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+    justify-content: space-around;
+    align-items: center;
+    z-index: 1000002;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+}
+
+.mobile-bottom-bar {
+    transition: transform 0.09s ease-in-out;
+}
+
+.hide-bar {
+    transform: translateY(100%);
+}
+
+.mobile-bottom-bar a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    text-align: center;
+    color: white;
+    text-decoration: none;
+    padding: 3px 0;
+    width: 15%;
+}
+
+.mobile-bottom-bar a:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.mobile-bottom-bar i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+.mobile-bottom-bar span {
+    display: block;
+    font-size: 10px;
+    color: #ecf0f1;
+}
+
+#trivia-btn {
+    position: fixed;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #trivia-btn,
+    #menu-btn,
+    #back-to-top-btn {
+        display: none;
+    }
+}
+
+#trivia-label:hover {
+    color: #ff8623;
+}
+
+#trivia-label {
+    margin-top: 50px
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+}
+
+#clear-search-btn {
+    display: block;
+    margin: 20px auto;
+    background-color: #7378c5;
+    color: black;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 10px;
+    font: inherit;
+    margin-right: 20px;
+}
+
+#quiz-container {
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 20px;
+    border-radius: 10px;
+    max-width: calc(100% - 20px);
+    width: 600px;
+    margin: 10px auto;
+    box-sizing: border-box;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#quiz-form {
+    width: calc(100% - 20px);
+    margin: 10px auto;
+    box-sizing: border-box;
+    padding: 0 10px;
+}
+
+@media (max-width: 520px) {
+    #quiz-container, #quiz-form {
+        width: calc(100% - 20px);
+        margin: 10px auto;
+    }
+}
+
+.button {
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 20px;
+}
+
+#clear-search-btn:hover {
+    background-color: #ff8623;
+}
+
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-align: left;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+@media (max-width: 900px) {
+    #profileBtn {
+        display: none;
+    }
+}
+
+@media (max-width: 840px) {
+    #my-heading {
+        margin-left: 0;
+    }
+
+    .back-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: -180px;
+        border-radius: 8px;
+    }
+
+    .about {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 0;
+        border-radius: 8px;
+    }
+
+    .favorites-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 189px;
+        border-radius: 8px;
+        padding-left: 12px;
+        padding-right: 12px;
+        box-sizing: border-box;
+    }
+
+    #googleSignInBtn {
+        display: none;
+    }
+
+    header {
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    main {
+        margin-bottom: -40px;
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #trivia-label {
+        margin-top: 60px;
+    }
+}
+
+#movie-match-btn2 {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/about.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/about.html
new file mode 100644
index 00000000..87048c73
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/about.html
@@ -0,0 +1,1286 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>About The MovieVerse - Your Ultimate Movie Guide</title>
+    <meta property="og:title" content="About The MovieVerse - Your Ultimate Movie Guide" />
+    <meta name="description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
+    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/about.html"/>
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#aboutHeader">About The MovieVerse</a></li>
+            <li><a href="#subheading1">Core Features</a></li>
+            <li><a href="#subheading2">Explore Our Other Apps</a></li>
+            <li><a href="#subheading">Our Vision</a></li>
+            <li><a href="#subheading3">Join The Journey</a></li>
+            <li><a href="#subheading4">Useful Links</a></li>
+            <li><a href="terms-of-service.html">Terms of Service</a></li>
+            <li><a href="privacy-policy.html">Privacy Policy</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
+    <main id="main2" style="margin: 0 auto">
+        <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
+        <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
+        <div style="width: 100%">
+            <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
+        </div>
+
+        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
+        <h3 id="subheading1" style="cursor: pointer">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">
+            <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 specialized sections like Director's Spotlight and award-winning films.</li>
+            <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
+            <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Interactive Discussions and Trivia:</strong> Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.</li>
+            <li><i style="margin-right: 3px" class="fas fa-fire"></i> <strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.</li>
+            <li><i style="margin-right: 3px" class="fas fa-clock"></i> <strong>Movie Timeline:</strong> Select a period and explore a curated list of movies from that era, offering a unique way to experience the evolution of film over time.</li>
+            <li><i style="margin-right: 3px" class="fas fa-heart"></i> <strong>Movie Match/Recommendation:</strong> Find or get recommended a movie that matches your mood, genre, and time period, ensuring you always find the perfect movie to watch.</li>
+            <li><i style="margin-right: 3px" class="fas fa-info-circle"></i> <strong>Detailed Filmography Insights:</strong> Delve into the careers of your favorite <a id="githubLink1" href="director-details.html">directors</a>, <a id="githubLink1" href="actor-details.html">actors</a>, and <a id="githubLink1" href="company-details.html">companies</a> with dedicated pages detailing their filmography and impact on cinema.</li>
+            <li><i style="margin-right: 3px" class="fas fa-sign-in-alt"></i> <strong>Sign In/Sign Out:</strong> Sign in to your account to access your personalized movie recommendations, <a id="githubLink1" href="favorites.html">watch lists</a>, <a id="githubLink1" href="user-profile.html">profile</a>, and more.</li>
+            <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Watch Lists:</strong> Save movies to your watch lists and share them with your loved ones, ensuring you never miss out on a movie you want to watch. If you're signed in, your watch lists are <a id="githubLink1" href="favorites.html">accessible</a> across all your devices!</li>
+            <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Chat Functionality:</strong> Engage with fellow movie enthusiasts through our secure <a id="githubLink1" href="chat.html">chat</a> feature, where you can discuss and connect with like-minded MovieVerse individuals!</li>
+            <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Search Functionality:</strong> Use our extensive <a id="githubLink1" href="search.html">search</a> functionality to find movies, actors, directors, and TV series, ensuring you always find what you're looking for.</li>
+            <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
+            <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
+        </ul>
+
+        <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
+
+        <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
+
+        <ul style="align-content: center; color: white">
+            <li>
+                <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';" class="app-btn">The StickyNotes App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Embark on a culinary adventure with RecipeGenie, your go-to database for delightful recipes.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';" class="app-btn">The RecipeGenie Database</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Stay ahead of the weather with WeatherMate, your personal weather forecasting assistant.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';" class="app-btn">The WeatherMate App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Keep track of your tasks and boost productivity with the ToDo App, a straightforward task manager.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-ToDo-App/';" class="app-btn">The ToDo App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Plan and manage your events seamlessly with EventHorizon, your ultimate event organizer.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
+            </li>
+        </ul>
+
+        <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
+        <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
+
+        <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
+        <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
+        <br/>
+        <p style="color: white; text-align: center">Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of movies!</p>
+        <br/>
+        <p style="color: white; text-align: center">
+            <em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <strong><a style="color: #ff8623" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a></strong>.
+                <i style="margin-left: 3px" class="fab fa-github"></i>
+            </em>
+        </p>
+
+        <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
+        <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
+        <br/>
+        <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
+        <br/>
+        <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
+
+        <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
+        <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
+        <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
+        <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
+    </main>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
+        </a>
+    </footer>
+
+    <script>
+        document.getElementById('logo').addEventListener('click', function() {
+            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
+
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+
+        document.getElementById('logo').addEventListener('mouseover', function() {
+            this.style.cursor = 'pointer';
+            this.style.transform = 'scale(1.05)';
+            this.style.transition = '0.3s ease-in-out';
+        });
+
+        document.getElementById('logo').addEventListener('mouseout', function() {
+            this.style.transform = 'scale(1)';
+        });
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById("subheading1").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading2").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading2').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading3").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading3').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading4").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading4').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("aboutHeader").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('aboutHeader').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/actor-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/actor-details.html
new file mode 100644
index 00000000..e96b40fe
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/actor-details.html
@@ -0,0 +1,808 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Actor Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html">
+    <meta property="og:title" content="Actor Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        #actor-details-container {
+            margin-top: 0;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #actor-details-container {
+                margin-top: 25px;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #actor-details-container {
+            margin-top: 25px;
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <main id="main" style="margin-left: 25px; height: 0"></main>
+
+    <div class="details-container" id="actor-details-container" style="margin-bottom: 70px;">
+        <!-- Left side for Actor Image -->
+        <div class="actor-left" style="overflow-y: hidden">
+            <h2 id="actor-name" class="actor-header"></h2>
+            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
+            <div style="height: 20px"></div>
+        </div>
+        <!-- Right side for Description and Info -->
+        <div class="actor-right" id="actor-description">
+            <!-- Actor details will be populated here -->
+        </div>
+    </div>
+
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script src="../js/actor-details.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('actor-image').addEventListener('click', function() {
+            const imageUrl = this.src.replace('w1280', 'original')
+            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/analytics.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/analytics.html
new file mode 100644
index 00000000..9b02e879
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/analytics.html
@@ -0,0 +1,910 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Database Analytics - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html">
+    <meta property="og:title" content="Database Analytics - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="https://movie-verse.com/MovieVerse-Frontend/css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("https://movie-verse.com/images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards 0.5s;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        @keyframes dropIn {
+            0% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: dropIn 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1s;
+        }
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0" class="notranslate">
+            <h1 id="my-heading" style="margin-bottom: -10px">
+                The Mo<span class="highlight">vieV</span>erse
+            </h1>
+        </a>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="#chart1">Annual Releases</a></li>
+            <li><a href="#chart2">Genre Popularity</a></li>
+            <li><a href="#chart3">Certification Breakdown</a></li>
+            <li><a href="#chart4">Popularity Trends</a></li>
+            <li><a href="#chart5">Language Counts</a></li>
+            <li><a href="#chart6">Votes by Genre</a></li>
+            <li><a href="#chart7">Monthly Releases</a></li>
+            <li><a href="#chart8">Decadal Releases</a></li>
+            <li><a href="#chart9">Country Releases</a></li>
+            <li><a href="#chart11">Yearly Top Movies</a></li>
+            <li><a href="#chartVotesOverYears">Votes Over Time</a></li>
+            <li><a href="#chartHighlyRatedMovies">Top Movies Trends</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+        </ul>
+    </nav>
+    <div>
+        <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div class="chart-container" style="margin-bottom: 250px">
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title1" style="cursor: pointer">Number of Movies Released Each Year</h2>
+            <canvas id="chart1"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title2" style="cursor: pointer">Popularity of Genres</h2>
+            <canvas id="chart2"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title3" style="cursor: pointer">Movies Distribution by Certification</h2>
+            <canvas id="chart3"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title4" style="cursor: pointer">Average Movie Popularity Over Time</h2>
+            <canvas id="chart4"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title5" style="cursor: pointer">Movies Count by Original Language</h2>
+            <canvas id="chart5"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title6" style="cursor: pointer">Average Vote Count by Genre</h2>
+            <canvas id="chart6"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title7" style="cursor: pointer">Movie Releases by Month</h2>
+            <canvas id="chart7"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title8" style="cursor: pointer">Movie Releases by Decades</h2>
+            <canvas id="chart8"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title9" style="cursor: pointer">Movie Releases by Countries</h2>
+            <canvas id="chart9"></canvas>
+        </div>
+        <div class="chart-box" id="chart-title1">
+            <h2 class="chart-title" id="chart-title10" style="cursor: pointer">Top Rated Movies per Year</h2>
+            <canvas id="chart11"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title11" style="cursor: pointer">Total Movie Votes Over Years</h2>
+            <canvas id="chartVotesOverYears"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated Movies Over Years</h2>
+            <canvas id="chartHighlyRatedMovies"></canvas>
+        </div>
+    </div>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="ad-container2" style="display: block; text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script src="../js/analytics.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData1()}/3/search/multi?${getMovieNames1()}${getMovieCode1()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.error("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.error('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData1()}/3/person/${item.id}?${getMovieNames1()}${getMovieCode1()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.error('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        function getMovieVerseData1(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function getMovieNames1(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode1() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/api_fails.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/api_fails.html
new file mode 100644
index 00000000..c7fa1c18
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/api_fails.html
@@ -0,0 +1,1026 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>We're Offline - The MovieVerse</title>
+    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html">
+    <meta property="og:title" content="We're Offline - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="We're Offline - The MovieVerse">
+    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="center-text" style="padding: 120px;">
+        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">MovieVerse is Offline</div>
+        <p>We're sorry, our service is currently unavailable. This could be due to a temporary issue with our servers or your internet connection. Please try again.</p>
+        <p>If you continue to experience issues, please contact our support team at <a id="link" href="support.html">our support page</a>.</p>
+        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
+    </div>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 500px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/article.hbs b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/article.hbs
new file mode 100644
index 00000000..644be6cd
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/article.hbs
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{article.title}}</title>
+</head>
+<body>
+  <header>
+    <h1>{{article.title}}</h1>
+    <p>Written by: {{article.author}}</p>
+  </header>
+  <article>
+    <p>{{article.content}}</p>
+  </article>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chat.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chat.html
new file mode 100644
index 00000000..4054ba67
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chat.html
@@ -0,0 +1,1023 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chat - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Chat - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chat.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chat.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Chat - The MovieVerse">
+    <meta name="twitter:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .user-search-result {
+            background-color: #333;
+            margin: 10px auto;
+            padding: 10px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            color: white;
+            transition: background-color 0.3s ease;
+            flex-wrap: wrap;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+        }
+        .user-search-result img {
+            flex-shrink: 0;
+            margin-right: 10px;
+            border-radius: 8px;
+        }
+        .user-search-result > div {
+            flex: 1;
+            min-width: 120px;
+            word-break: break-word;
+        }
+        .tooltip {
+            position: absolute;
+            background-color: #333;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            z-index: 100;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+            white-space: nowrap;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #main {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            min-height: 80vh;
+        }
+        #userListContainer {
+            flex-basis: 30%;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+        #searchUserInput {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ff8623;
+            margin-bottom: 10px;
+            background-color: #333;
+            color: white;
+        }
+        @media (min-width: 768px) {
+            #searchUserInput {
+                min-width: 320px;
+            }
+        }
+        .user:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .user {
+            border-radius: 8px;
+            padding: 5px;
+            cursor: pointer;
+        }
+        .user-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            background-color: #333;
+            color: white;
+        }
+        .user-item:hover {
+            background-color: #ff8623;
+        }
+        .user-avatar {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+        .user-info {
+            flex-grow: 1;
+        }
+        .user-email {
+            font-weight: bold;
+        }
+        .user-bio {
+            color: #ccc;
+        }
+        #chatSection {
+            display: flex;
+            flex-direction: column;
+            flex-basis: 65%;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+            min-height: 90vh;
+        }
+        #messages {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background: none;
+            display: flex;
+            flex-direction: column;
+            border-radius: 8px;
+        }
+        #chatInput {
+            padding: 10px;
+            border-top: 1px solid #ccc;
+        }
+        #userEmailDisplay {
+            background-color: #ff8623;
+            color: white;
+            border-radius: 10px;
+            padding: 10px;
+        }
+        .message {
+            margin: 5px 0;
+            padding: 10px;
+            border-radius: 8px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .my-message {
+            align-self: flex-end;
+            background-color: #ff8623;
+            color: white;
+        }
+        .other-message {
+            align-self: flex-start;
+            background-color: #7378c5;
+            color: white;
+        }
+        #chatInput {
+            padding: 10px;
+            border-top: 1px solid #ccc;
+        }
+        #messageInput {
+            flex-grow: 1;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ff8623;
+            background-color: #333;
+            color: white;
+            width: 100%;
+        }
+        #sendButton {
+            padding: 10px 20px;
+            border-radius: 5px;
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #sendButton:hover {
+            background-color: #7f4caf;
+        }
+        #main {
+            display: flex;
+            justify-content: space-between;
+            align-items: stretch;
+            min-height: 80vh;
+            gap: 20px;
+        }
+        #userListContainer {
+            flex: 1;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+        #chatSection {
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+            padding: 20px;
+        }
+        @media (max-width: 900px) {
+            #main {
+                flex-direction: column;
+                align-items: center;
+                width: 100%;
+                margin-left: 0;
+            }
+            #userListContainer, #chatSection {
+                width: 90% !important;
+                margin: 0 auto;
+                max-width: 100% !important;
+                display: flex;
+                flex-direction: column;
+            }
+            #userList {
+                max-height: 300px;
+                overflow-y: auto;
+            }
+            #chatSection {
+                width: 100% !important;
+                flex-grow: 1;
+            }
+            #noUserSelected {
+                width: 90% !important;
+                flex-grow: 1;
+            }
+        }
+        .selected-user {
+            background-color: #ff8623;
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <main id="main" style="margin-bottom: 20px">
+        <div id="userListContainer">
+            <div id="searchContainer">
+                <input type="text" id="searchUserInput" placeholder="Search for a user" style="font: inherit" />
+            </div>
+            <div id="searchUserResults"></div>
+            <h3>Recent & Suggested Chats</h3>
+            <div id="userList"></div>
+        </div>
+        <div id="chatSection">
+            <div id="userEmailDisplay" style="padding: 10px;"></div>
+            <div id="messages"></div>
+            <div id="chatInput">
+                <input type="text" id="messageInput" placeholder="Type your message" style="font: inherit" />
+                <button id="sendButton">Send</button>
+            </div>
+        </div>
+        <div id="noUserSelected" style="flex-basis: 65%; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; color: white; display: flex; justify-content: center; align-items: center; min-height: 90vh;">
+            <p>Welcome to MovieVerse Chats! Select or find a user to begin chatting with your fellow movie enthusiasts!</p>
+        </div>
+    </main>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
+    </div>
+    <footer id="footer">
+        <p>© 2024 The MovieVerse. All rights reserved.</p>
+    </footer>
+    <script type="module" src="../js/chat.js"></script>
+    <script src="../js/chat-auxiliary.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chatbot.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chatbot.html
new file mode 100644
index 00000000..c3f9dc5c
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chatbot.html
@@ -0,0 +1,846 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Chatbot - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html">
+    <meta property="og:title" content="Chatbot - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Chatbot - The MovieVerse">
+    <meta name="twitter:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="manifest" href="../../manifest.json">
+    <script type="importmap">
+        {
+          "imports": {
+            "@google/generative-ai": "https://esm.run/@google/generative-ai"
+          }
+        }
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        #header {
+            margin-top: 26px;
+            padding-left: 25px;
+        }
+        #form {
+            margin-top: -5px;
+            margin-right: 55px;
+        }
+        @media (max-width: 800px){
+            #header {
+                margin-top: 10px;
+            }
+            #form {
+                margin-top: -15px;
+                margin-right: 0;
+            }
+        }
+        @media (min-width: 900px) {
+            #header {
+                margin-top: 26px;
+                padding-left: 25px;
+            }
+            #form {
+                margin-top: 2px;
+            }
+            #my-heading {
+                margin-top: 17px !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #my-heading {
+                margin-top: 9px !important;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        #homepage-header {
+            margin-top: -10px;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+            #homepage-header {
+                margin-top: 10px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="bot-header">
+        <h2 id="search-title">The <span class="highlight1">MovieVerse</span> Assistant</h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+        <h4 id="alt-title" style="font-weight: normal; font-size: 15px; color: #ff8623">Dive deep into the movie world with our expert assistant!</h4>
+    </div>
+    <main id="main" style="padding: 0; margin: 0 auto; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 400px">
+        <div id="chatbotContainer">
+            <div id="chatbotHeader">The MovieVerse Assistant</div>
+            <div id="chatbotBody"></div>
+            <input id="chatbotInput" type="text" placeholder="Ask me about anything..." title="Type your message here"/>
+            <button id="sendButton" title="Send this message">Send</button>
+        </div>
+    </main>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/chatbot.js" type="module"></script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading response...</p>
+    </div>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; color: white; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+            });
+
+            function displaySearchResults(results) {
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+                    details.style.textAlign = 'left';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+    </script>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/christopher-nolan.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/christopher-nolan.html
new file mode 100644
index 00000000..2874ec08
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/christopher-nolan.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Director Details - Explore More About Christopher Nolan</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/christopher-nolan.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html">
+    <meta property="og:title" content="Director Details - Christopher Nolan">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Director Details - Christopher Nolan">
+    <meta name="twitter:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" style="margin-left: 25px">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 25px; margin-bottom: -40px">
+
+    </main>
+
+    <div class="details-container" id="director-details-container">
+        <!-- Left side for Director Image -->
+        <div class="director-left" style="overflow: hidden">
+            <h2 id="director-name" class="director-header"></h2>
+            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; overflow: hidden"/>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="director-right" id="director-description">
+            <!-- Director details will be populated here -->
+        </div>
+    </div>
+
+    <script src="../js/christopher-nolan.js"></script>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+
+<script>
+    function getMovieVerseData(input) {
+        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+    }
+
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.log('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    const movieCode = {
+        part1: 'YzVhMjBjODY=',
+        part2: 'MWFjZjdiYjg=',
+        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+    };
+
+    function getMovieCode() {
+        return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+    }
+
+    function generateMovieNames(input) {
+        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+    }
+
+    function fallbackMovieSelection() {
+        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+        localStorage.setItem('selectedMovieId', randomFallbackMovie);
+        window.location.href = 'movie-details.html';
+    }
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const savedBg = localStorage.getItem('backgroundImage');
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+
+            if (savedBg) {
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+            }
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+</script>
+
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/company-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/company-details.html
new file mode 100644
index 00000000..f0b6c77c
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/company-details.html
@@ -0,0 +1,795 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Company Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/company-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Company Details - The MovieVerse" />
+    <meta name="description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Company Details - The MovieVerse">
+    <meta name="twitter:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @media (min-width: 800px) {
+            footer {
+                margin-top: 500px;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: 0 !important;
+            }
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <main id="main" style="margin-left: 25px; height: 0"></main>
+    <div class="details-container" id="company-details-container" style="margin-bottom: 650px">
+        <div class="company-left">
+            <div class="title-logo-container">
+                <h2 id="company-name" class="company-header"></h2>
+                <img id="company-logo" alt="Loading Company Details..." style="z-index: 1000000000; width: 25vw; background-color: #ffffff; border-radius: 8px;"/>
+            </div>
+        </div>
+        <div class="company-right">
+            <p id="company-description" class="company-description"></p>
+            <p><strong>Headquarters:</strong> <span id="company-headquarters"></span></p>
+            <p><strong>Country:</strong> <span id="company-country"></span></p>
+            <p><strong>Website:</strong> <a id="company-website" href="" target="_blank"></a></p>
+            <p style="text-align: center"><strong>Produced Movies:</strong></p>
+            <div style="text-align: center" id="company-movies-list" class="movies-list"></div>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 250px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/company-details.js"></script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('company-logo').addEventListener('click', function() {
+            const imageUrl = this.src.replace('w500', 'original');
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/create-account.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/create-account.html
new file mode 100644
index 00000000..ad374615
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/create-account.html
@@ -0,0 +1,1052 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Create Account - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html">
+    <meta property="og:title" content="Create Account - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Create Account - The MovieVerse">
+    <meta name="twitter:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="theme-color" content="#7378c5">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .account-creation-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .account-creation-form-container input[type="email"],
+        .account-creation-form-container input[type="password"],
+        .account-creation-form-container input[type="text"],
+        .account-creation-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .account-creation-form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+        .account-creation-form-container button:hover {
+            background-color: #22254b;
+            color: white;
+        }
+        .account-creation-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .account-creation-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+        #back-to-sign-in {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #back-to-sign-in:hover {
+            background-color: #22254b;
+            color: white;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0;
+            }
+        }
+        #local-time {
+            transform: translateX(12%);
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="account-creation-form-container" id="account-creation-form-container" style="margin-bottom: 300px">
+        <form id="createAccountForm">
+            <h2>Create Account</h2>
+            <p style="color: black">Create an account to personalize your movie recommendations, save  <a style="text-decoration: underline" id="githubLink1" href="favorites.html">favorites</a>, and enhance your movie discovery experience.</p>
+            <input type="email" id="newEmail" placeholder="Email" required>
+            <input type="password" id="newPassword" placeholder="Password" required>
+            <input type="password" id="confirmPassword" placeholder="Re-type Password" required>
+            <label style="margin-top: 10px; margin-bottom: 10px">
+                <input type="checkbox" id="togglePassword"> Show Password
+            </label>
+            <button type="submit">Create Account</button>
+            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
+        </form>
+    </div>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('newPassword');
+            const confirmPasswordInput = document.getElementById('confirmPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+                confirmPasswordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+                confirmPasswordInput.type = 'password';
+            }
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script src="../js/create-account.js" type="module"></script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+    </script>
+    <footer style="margin-top: 650px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/director-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/director-details.html
new file mode 100644
index 00000000..55acbdc4
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/director-details.html
@@ -0,0 +1,835 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Director Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/director-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html">
+    <meta property="og:title" content="Director Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Director Details - The MovieVerse">
+    <meta name="twitter:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        header {
+            margin-top: -5px;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="details-container" id="director-details-container" style="margin-top: -50px; margin-bottom: 60px">
+        <!-- Left side for Director Image -->
+        <div class="director-left" style="overflow-y: hidden">
+            <h2 id="director-name" class="director-header"></h2>
+            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
+            <div style="height: 20px"></div>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="director-right" id="director-description">
+            <!-- Director details will be populated here -->
+        </div>
+    </div>
+
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/director-details.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+
+<script>
+    function getMovieVerseData(input) {
+        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+    }
+
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.log('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    const movieCode1 = {
+        part1: 'YzVhMjBjODY=',
+        part2: 'MWFjZjdiYjg=',
+        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+    };
+
+    function getMovieCode() {
+        return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+    }
+
+    function generateMovieNames(input) {
+        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+    }
+
+    function fallbackMovieSelection() {
+        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+        localStorage.setItem('selectedMovieId', randomFallbackMovie);
+        window.location.href = 'movie-details.html';
+    }
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const savedBg = localStorage.getItem('backgroundImage');
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+
+            if (savedBg) {
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+            }
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+
+    document.getElementById('director-image').addEventListener('click', function() {
+        const imageUrl = this.src.replace('w1280', 'original');
+        const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+        document.getElementById('image-modal').addEventListener('click', function(event) {
+            if (event.target === this) {
+                this.remove();
+            }
+        });
+    });
+</script>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/favorites.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/favorites.html
new file mode 100644
index 00000000..a679ec41
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/favorites.html
@@ -0,0 +1,1102 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Favorites & Watchlists - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/movie-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Favorites & Watchlists - The MovieVerse" />
+    <meta name="description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <script src="../js/settings.js"></script>
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Favorites & Watchlists - The MovieVerse">
+    <meta name="twitter:description" content="Manage your favorite movies and watch lists on The MovieVerse. Keep track of movies you love and organize your watch lists for future viewing.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <script src="../js/favorites.js" type="module"></script>
+    <link rel="manifest" href="../../manifest.json">
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .watchlist-controls {
+            position: absolute;
+            top: 10px;
+            display: flex;
+            align-items: start;
+            gap: 5px;
+        }
+        .watchlist-controls button {
+            background: none;
+            border: none;
+            color: #ff8623;
+            cursor: pointer;
+            height: 20px;
+            width: 20px;
+            margin-right: 8px;
+            font-size: 18px;
+        }
+        #create-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #edit-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #delete-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        .watchlist.pinned .watchlist-controls #pin-btn {
+            color: #7378c5;
+        }
+        .watchlist-controls button:hover {
+            color: #7378c5;
+        }
+        .watchlist-controls button:first-child {
+            order: -1;
+        }
+        .watchlist {
+            position: relative;
+            padding-top: 30px;
+        }
+        .watchlist.pinned {
+            border: 2px solid yellow;
+        }
+        .watchlist-buttons-container {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-left: 0;
+            margin-top: 35px;
+            margin-bottom: 15px;
+        }
+        @media (max-width: 1200px) {
+            #local-time {
+                display: none;
+            }
+        }
+        #button {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        #how-to-use {
+            text-align: center;
+            margin-top: 20px;
+            margin-bottom: 60px;
+        }
+        #how-to-use-btn {
+            background-color: #7378c5;
+            color: white;
+            border-radius: 8px;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font: inherit;
+            cursor: pointer;
+            border: none;
+        }
+        #how-to-use-btn:hover {
+            background-color: #ff8623;
+        }
+        #how-to-use-section {
+            max-width: 400px;
+            margin: 20px auto;
+            padding: 15px;
+            background-color: #7378c5;
+            color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            display: none;
+            transition: height 0.5s ease-in-out;
+            margin-bottom: 240px;
+        }
+        #how-to-use-section:hover {
+            background-color: #6e73bd;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #githubLink3 {
+            color: white !important;
+        }
+        #githubLink3:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -30px; padding-top: 19px">
+        <div id="header-title">
+            <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
+                <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                    The Mo<span class="highlight" id="highlight">vieV</span>erse
+                </a>
+            </h1>
+        </div>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 5px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul id="watchlist-links" style="overflow-y: auto">
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
+    <div class="watchlist-buttons-container">
+        <button id="create-watchlist-btn">Create Watch Lists</button>
+        <button id="edit-watchlist-btn">Edit Watch Lists</button>
+        <button id="delete-watchlist-btn">Delete Watch Lists</button>
+    </div>
+
+    <div id="create-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('create-watchlist-modal')">&times;</span>
+            <h2>Create a Watch List</h2>
+            <form id="create-watchlist-form">
+                <label>Name:</label>
+                <input type="text" id="new-watchlist-name" placeholder="Watchlist's Name" style="font: inherit" required>
+                <div style="height: 20px"></div>
+                <label>Description:</label>
+                <textarea placeholder="Watchlist Description" id="new-watchlist-description" style="font: inherit"></textarea>
+                <button type="submit" id="button" style="display: block; margin-left: auto; color: white; margin-right: auto;">Create</button>
+            </form>
+        </div>
+    </div>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <div id="edit-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('edit-watchlist-modal')">&times;</span>
+            <h2>Edit a Watch List</h2>
+            <form id="edit-watchlist-form">
+                <!-- Dynamically populate this form based on user selection -->
+            </form>
+        </div>
+    </div>
+
+    <div id="delete-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('delete-watchlist-modal')">&times;</span>
+            <h2>Delete Watch Lists</h2>
+            <label>Select watch lists to delete:</label>
+            <form id="delete-watchlist-form">
+                <!-- Dynamically populate this form based on user selection -->
+            </form>
+        </div>
+    </div>
+
+    <div id="watchlists-display-section">
+        <!-- Dynamically populated watch lists will go here -->
+    </div>
+
+    <main id="favorites-main" style="margin-top: 75px; text-align: center"></main>
+    <main id="favorites-main-tv" style="margin-top: 75px; text-align: center"></main>
+
+    <div id="how-to-use">
+        <button id="how-to-use-btn">How to Use</button>
+    </div>
+
+    <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
+        <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
+        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
+        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
+        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
+        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
+        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
+        <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists! 🍿🎬</p>
+    </div>
+
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink3" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" title="Go to top" style="bottom: 90px; right: 10px; z-index: 10012" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">Back to Top</button>
+    <script src="../js/movie-details.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
+        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
+
+        let initialMoviesSelection = [];
+        let initialTVSeriesSelection = [];
+
+        function translateFBC(value) {
+            return atob(value);
+        }
+
+        function getFBConfig1() {
+            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
+            return translateFBC(fbConfig1);
+        }
+
+        function getFBConfig2() {
+            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
+            return translateFBC(fbConfig2);
+        }
+
+        function getFBConfig3() {
+            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
+            return translateFBC(fbConfig3);
+        }
+
+        function getFBConfig4() {
+            const fbConfig4 = "ODAyOTQzNzE4ODcx";
+            return translateFBC(fbConfig4);
+        }
+
+        function getFBConfig5() {
+            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
+            return translateFBC(fbConfig5);
+        }
+
+        const firebaseConfig = {
+            apiKey: getFBConfig1(),
+            authDomain: getFBConfig2(),
+            projectId: "movieverse-app",
+            storageBucket: getFBConfig3(),
+            messagingSenderId: getFBConfig4(),
+            appId: getFBConfig5()
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const db = getFirestore(app);
+
+        async function loadNavWatchlistLinks() {
+            const navList = document.getElementById('watchlist-links');
+            const firstStaticItem = navList.querySelector('li');
+
+            try {
+                showSpinner();
+
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                let watchlists = [];
+
+                if (currentUserEmail) {
+                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+                    const querySnapshot = await getDocs(q);
+                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
+                }
+                else {
+                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+                }
+
+                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
+                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
+
+                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
+
+                let counter = 1;
+
+                watchlists.forEach(watchlist => {
+                    const listItem = document.createElement('li');
+                    listItem.className = 'dynamic';
+                    const link = document.createElement('a');
+                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
+
+                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
+                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
+                        counter++;
+                    }
+                    else {
+                        link.textContent = watchlist.name;
+                    }
+
+                    listItem.appendChild(link);
+                    navList.insertBefore(listItem, firstStaticItem);
+                });
+
+                hideSpinner();
+                assignIdsToWatchlists();
+            }
+            catch (error) {
+                console.error('Error loading watchlists for navigation:', error);
+                hideSpinner();
+            }
+        }
+
+        function assignIdsToWatchlists() {
+            document.querySelectorAll('.watchlist').forEach(watchlist => {
+                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
+                if (!watchlist.id) {
+                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
+    </script>
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/feedback.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/feedback.html
new file mode 100644
index 00000000..41e43187
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/feedback.html
@@ -0,0 +1,1107 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feedback - The MovieVerse</title>
+    <meta name="description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them." />
+    <meta property="og:title" content="Feedback - The MovieVerse">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Feedback - The MovieVerse">
+    <meta name="twitter:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .form-container h1 {
+            color: #ff8623;
+        }
+        .form-container input,
+        .form-container textarea,
+        .form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .form-container button[type="submit"]:hover {
+            background-color: #ff8623;
+        }
+        .form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #supportBtn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #supportBtn:hover {
+            background-color: #ff8623;
+        }
+        @media (min-width: 900px) {
+            #my-heading {
+                margin-top: 15px !important;
+            }
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="form-container">
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Feedback</div>
+        <p style="color: black">Noticed a bug? Have a suggestion? Wrong movie information? Or just want to say hi? We'd love to hear from you!</p>
+        <form action="https://formspree.io/f/xqkrbdqd" method="POST">
+            <input type="text" id="name" name="name" placeholder="Your Name" required>
+            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
+            <textarea id="message" name="message" placeholder="Your Feedback" required></textarea>
+            <button type="submit">Send Feedback</button>
+            <p style="color: black">Need immediate assistance? Submit a support request using the link below and we'll get back to you as soon as possible.</p>
+        </form>
+        <button id="supportBtn" onclick="window.location.href='support.html'">Request Support</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        function updateClock() {
+            var now = new Date();
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            hours = hours < 10 ? '0' + hours : hours;
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            var timeString = hours + ':' + minutes;
+            document.getElementById('clock').innerHTML = timeString;
+        }
+
+        setInterval(updateClock, 1000);
+        window.onload = updateClock;
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 200px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/inception.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/inception.html
new file mode 100644
index 00000000..897d13a4
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/inception.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Details - Explore Inception by Christopher Nolan</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/inception.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/inception.html">
+    <meta property="og:title" content="Movie Details - Explore Inception by Christopher Nolan">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/inception.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/inception.jpg"/>
+    <meta property="og:image:alt" content="Inception Movie Poster">
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Details - Explore Inception by Christopher Nolan">
+    <meta name="twitter:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px">
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 35px; margin-top: 20px">
+
+    </main>
+
+    <div class="details-container" id="movie-details-container">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw"/>
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px"><strong>0.0/5.0</strong></span>
+        </div>
+
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+            <div id="comments-section">
+                <h3>Community Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Toggle Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This Movie</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname" required>
+                            <textarea id="user-comment" placeholder="Your comment" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your ideas!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script src="../js/inception.js"></script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('movie-image').addEventListener('click', function() {
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+
+    <script src="../js/comments.js" type="module"></script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/leonardo-dicaprio.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/leonardo-dicaprio.html
new file mode 100644
index 00000000..18a4d369
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/leonardo-dicaprio.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Actor Details - Leonardo DiCaprio</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta name="description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html">
+    <meta property="og:title" content="Actor Details - Leonardo DiCaprio">
+    <meta property="og:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Actor Details - Leonardo DiCaprio">
+    <meta name="twitter:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <script src="../js/leonardo-dicarprio.js" defer></script>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            background-image: url("https://movie-verse.com/images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+
+            <div id="search-results" class="search-results"></div>
+
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" style="margin-left: 25px">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 25px"></main>
+
+    <div class="details-container" id="actor-details-container">
+        <!-- Left side for Actor Image -->
+        <div class="actor-left" style="overflow: hidden">
+            <h2 id="actor-name" class="actor-header"></h2>
+            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw"/>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="actor-right" id="actor-description">
+            <!-- Actor details will be populated here -->
+        </div>
+    </div>
+
+    <script src="../js/leonardo-dicarprio.js"></script>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('actor-image').addEventListener('click', function() {
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-details.html
new file mode 100644
index 00000000..bfc4fb00
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-details.html
@@ -0,0 +1,907 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/movie-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html">
+    <meta property="og:title" content="Movie Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Details - The MovieVerse">
+    <meta name="twitter:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        #favorite-btn:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        .favorited:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #movie-details-container {
+                margin-top: -50px;
+            }
+        }
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #rating-header {
+            color: #ffeb3b;
+        }
+        #rating-header:hover {
+            color: #ff8623;
+            transition: 0.2s ease-in;
+        }
+        #movie-details-container {
+            margin-top: 39px;
+        }
+        .movie-left {
+            margin-top: -10px;
+        }
+        @media (max-width: 767px) {
+            #movie-details-container {
+                margin-top: 0;
+            }
+            #form1 {
+                margin-bottom: 39px;
+            }
+            .movie-left {
+                margin-top: -40px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" >
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none; height: 0">
+        <h2 id="search-title"></h2>
+    </div>
+    <main id="main" style="margin-left: 35px; height: 0"></main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
+            <div id="comments-section">
+                <h3>Movie Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Toggle Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal" style="z-index: 100005">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This Movie</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
+                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right" style="position: relative; overflow: hidden">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: -20px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/movie-details.js"></script>
+    <script src="../js/add-to-favorites.js" type="module"></script>
+    <script type="module">
+        import { toggleFavorite, checkAndUpdateFavoriteButton } from '../js/add-to-favorites.js';
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const favoriteBtn = document.getElementById('favorite-btn');
+            if (favoriteBtn) {
+                favoriteBtn.addEventListener('click', toggleFavorite);
+            }
+        });
+
+        checkAndUpdateFavoriteButton();
+    </script>
+    <script type="module">
+        import { loadUserRatings, updateAverageMovieRating } from '../js/ratings-module.js';
+
+        document.addEventListener('DOMContentLoaded', async () => {
+            const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+            const savedRatings = await loadUserRatings(currentUserEmail);
+            const movieId = localStorage.getItem('selectedMovieId');
+            const movieRating = savedRatings[movieId] || 0;
+            setStarRating(movieRating);
+        });
+
+        function setStarRating(rating) {
+            const stars = document.querySelectorAll('.rating .star');
+            stars.forEach(star => {
+                star.style.color = star.dataset.value > rating ? 'white' : 'gold';
+            });
+            document.getElementById('rating-value').textContent = `${rating}.0/5.0`;
+        }
+
+        let isHovering = false;
+
+        const stars = document.querySelectorAll('.rating .star');
+        stars.forEach(star => {
+            star.addEventListener('mouseover', (e) => {
+                isHovering = true;
+                setStarRating(e.target.dataset.value);
+            });
+
+            star.addEventListener('mouseout', () => {
+                isHovering = false;
+                setTimeout(() => {
+                    if (!isHovering) {
+                        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                        loadUserRatings(currentUserEmail).then(savedRatings => {
+                            const movieId = localStorage.getItem('selectedMovieId');
+                            const movieRating = savedRatings[movieId] || 0;
+                            setStarRating(movieRating);
+                        });
+                    }
+                }, 10);
+            });
+
+            star.addEventListener('click', async (e) => {
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                const movieId = localStorage.getItem('selectedMovieId');
+                const rating = e.target.dataset.value;
+                await updateAverageMovieRating(currentUserEmail, movieId, rating);
+                window.location.reload();
+            });
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <script>
+        document.getElementById('movie-image').addEventListener('click', function() {
+            let imageUrl = this.src.replace('w780', 'original');
+            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+    <script src="../js/comments.js" type="module"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-match.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-match.html
new file mode 100644
index 00000000..6d4e0045
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-match.html
@@ -0,0 +1,854 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Match - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html">
+    <meta property="og:title" content="Movie Match - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Match - The MovieVerse">
+    <meta name="twitter:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #search {
+            margin-top: -1px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <main id="movie-match-main" style="margin-bottom: 45vh">
+        <div class="movie-match-container">
+            <h2 id="search-title1">Find Your Movie Match</h2>
+            <form id="movie-match-form">
+                <label for="mood">Select Your Mood:</label>
+                <select id="mood">
+                    <option value="happy">Happy</option>
+                    <option value="sad">Sad</option>
+                    <option value="angry">Scary</option>
+                    <option value="adventurous">Adventurous</option>
+                    <option value="romantic">Romantic</option>
+                    <option value="thoughtful">Thoughtful</option>
+                </select>
+                <label for="genre">Preferred Genre:</label>
+                <select id="genre">
+                    <option value="action">Action</option>
+                    <option value="comedy">Comedy</option>
+                    <option value="drama">Drama</option>
+                    <option value="sci-fi">Sci-Fi</option>
+                    <option value="romance">Romance</option>
+                </select>
+                <label for="period">Time Period:</label>
+                <select id="period">
+                    <option value="2020s">2020s</option>
+                    <option value="2010s">2010s</option>
+                    <option value="2000s">2000s</option>
+                    <option value="90s">90s</option>
+                    <option value="80s">80s</option>
+                </select>
+                <input type="submit" value="Get Matched Movie">
+            </form>
+        </div>
+    </main>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script src="../js/movie-match.js"></script>
+    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.error("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.error('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.error('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.error('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script>
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <footer style="margin-top: 0">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-timeline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-timeline.html
new file mode 100644
index 00000000..c59d916d
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-timeline.html
@@ -0,0 +1,806 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Timeline - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/actor-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html">
+    <meta property="og:title" content="Movie Timeline - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Timeline - The MovieVerse">
+    <meta name="twitter:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #search {
+            margin-top: -1px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        #footer {
+            margin-top: 700px
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #footer {
+                margin-top: 20px;
+            }
+        }
+    </style>
+
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .load-more-container {
+            width: 100%;
+            text-align: center;
+            margin-top: 20px;
+        }
+        .load-more-container button {
+            margin: 10px auto;
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            transition: background-color 0.3s ease;
+        }
+        .load-more-container button:hover {
+            background-color: #ff8623;
+        }
+        #ad-container2 {
+            display: none;
+        }
+        @media (max-width: 768px) {
+            #ad-container2 {
+                display: block;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -20px; margin-top: -5px" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="timeline-container" style="margin-bottom: 300px">
+        <div class="center-container">
+            <div style="font-weight: bold; font-size: 27px" id="select-text">Select a Period</div>
+            <div class="year-input-container">
+                <input type="number" id="start-year" class="year-input" title="Enter any year from 1900 until now" placeholder="Start Year" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
+                <input type="number" id="end-year" class="year-input" placeholder="End Year" title="Enter any year from 1900 until now" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
+                <button id="load-movies" onclick="updateMovies()" title="Get Movies in the Chosen Period!">Get Movies in This Period</button>
+            </div>
+            <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
+        </div>
+        <div class="center-container1" id="center-container1">
+            <main id="results" style="scroll-behavior: smooth">
+                <!-- Movies will be dynamically loaded here -->
+            </main>
+        </div>
+    </div>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 255px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 220px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 185px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 150px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 115px; z-index: 10012; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 10012">Back To Top</button>
+
+    <script src="../js/movie-timeline.js"></script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" id="back-top">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('back-top').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+    </script>
+
+    <footer id="footer">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+</body>
+
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movies-list.hbs b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movies-list.hbs
new file mode 100644
index 00000000..8bdfc1c8
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movies-list.hbs
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Movies List</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    .movie {
+      margin-bottom: 20px;
+    }
+    .movie-title {
+      font-weight: bold;
+    }
+    .movie-year {
+      font-style: italic;
+    }
+    .movie-description {
+      margin-top: 5px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Movies List</h1>
+  {{#each movies}}
+    <div class="movie">
+      <div class="movie-title">{{this.title}}</div>
+      <div class="movie-year">Released in: {{this.year}}</div>
+      <div class="movie-description">{{this.description}}</div>
+    </div>
+  {{/each}}
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/notifications.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/notifications.html
new file mode 100644
index 00000000..5aeeaee8
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/notifications.html
@@ -0,0 +1,1329 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Notifications - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Notifications - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations.">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html" />
+    <meta property="og:site_name" content="Notifications - The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Notifications - The MovieVerse">
+    <meta name="twitter:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations." />
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0 !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        main {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: flex-start;
+            gap: 20px;
+            padding: 20px;
+        }
+        section {
+            flex: 1 1 calc(33% - 40px);
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 100%;
+        }
+        @media (max-width: 1200px) {
+            section {
+                flex: 1 1 calc(50% - 40px);
+            }
+        }
+        @media (max-width: 768px) {
+            main {
+                flex-direction: column;
+            }
+            section {
+                flex-basis: 100%;
+            }
+        }
+        ul {
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            list-style-type: none;
+        }
+        li {
+            width: 100%;
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #ecf0f1;
+            border-left: 5px solid #2980b9;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        h2 {
+            margin-bottom: 10px;
+        }
+        li:hover {
+            background-color: #e1e3e4;
+            cursor: pointer;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #movie-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #actor-link {
+            color: black;
+        }
+        #director-link {
+            color: black;
+        }
+        #actor-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #director-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: 0 !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li style="background: none; border: none; box-shadow: none"><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#newFeatures">New Features</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#newReleases">New Releases</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#tipsTricks">Tips & Tricks</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#popularActors">Popular Actors</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#popularDirectors">Popular Directors</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="sign-in.html">Sign In</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="user-profile.html">Profile</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="feedback.html">Submit Feedback</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main>
+        <section id="newFeatures">
+            <h2 style="cursor: pointer">New Features</h2>
+            <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
+            <ul>
+                <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Improved Chatbot:</strong> Get personalized movie recommendations and insightful answers to your questions with our smarter chatbot.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Chat Feature:</strong> Join the conversation! Chat with fellow film fans in real-time to share your passion and discover new favorites.</li>
+                <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>Improved Recommendations:</strong>  Unlock a world of movies tailored just for you. Our enhanced engine suggests films based on your unique tastes and viewing habits.</li>
+                <li><i style="margin-right: 3px" class="fas fa-users"></i> <strong>User Profile Search:</strong>  Connect with your friends and discover their movie tastes. Search for user profiles and see what they're watching.</li>
+                <li><i style="margin-right: 3px" class="fas fa-user-plus"></i> <strong>Follow Other Users:</strong> Never miss a beat! Follow your friends to stay up-to-date on their latest movie discoveries and recommendations.</li>
+                <li><i style="margin-right: 3px" class="fas fa-share-alt"></i> <strong>Share Watch Lists:</strong> Spread the cinematic love! Create and share custom watch lists with friends and family, showcasing your curated collection of must-see films.</li>
+            </ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="newReleases">
+            <h2 style="cursor: pointer">New Releases</h2>
+            <h3>Since Your Last Visit</h3>
+            <ul id="releasesSinceLastVisit"></ul>
+            <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
+            <ul id="releasesThisMonth"></ul>
+            <h3 style="margin-top: 35px">Since the Beginning of This Year</h3>
+            <ul id="releasesThisYear"></ul>
+            <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
+            <p style="color: black; margin-top: 0"> You can always view more recommended movies in your recommended list in <a id="githubLink1" href="../../index.html#recommendedDIV">your recommended movies section</a>.</p>
+            <ul id="recommendedReleases"></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="tipsTricks">
+            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
+            <ul>
+                <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Engaging with the Community:</strong> Dive into vibrant discussions, share your insights, and connect with other film enthusiasts.</li>
+                <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Exploring Indie Films:</strong>  Unearth hidden cinematic treasures and broaden your horizons with our curated selection of independent films.</li>
+                <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>Rating Movies:</strong> Your voice matters! Share your opinions by rating movies and TV shows, helping us refine our recommendations for you and others.</li>
+                <li><i style="margin-right: 3px" class="fas fa-robot"></i> <strong>Chatting with the Chatbot:</strong> Need a movie suggestion or want to test your film trivia knowledge? Our friendly chatbot is always ready to entertain and inform.</li>
+                <li><i style="margin-right: 3px" class="fas fa-cloud"></i> <strong>Cloud Syncing:</strong> Your movie preferences follow you wherever you go. Enjoy seamless access to your watchlists and favorites across all your devices.</li>
+            </ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="popularActors">
+            <h2 style="cursor: pointer">Popular Actors</h2>
+            <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
+            <ul></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="popularDirectors">
+            <h2 style="cursor: pointer">Popular Directors</h2>
+            <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
+            <ul></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+    </main>
+    <script src="../js/notifications.js"></script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        document.getElementById('newFeatures').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('newReleases').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularActors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const updateDateElements = document.querySelectorAll('.updateDate');
+            const today = new Date();
+            const options = { year: 'numeric', month: 'long', day: 'numeric' };
+            const formattedDate = today.toLocaleDateString('en-US', options);
+            const formattedDateISO = today.toISOString().split('T')[0];
+
+            updateDateElements.forEach(element => {
+                element.textContent = formattedDate;
+                element.setAttribute('datetime', formattedDateISO);
+            });
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script>
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        let today = new Date();
+        today.setFullYear(today.getFullYear() - 18);
+        let year = today.getFullYear();
+        let month = (today.getMonth() + 1).toString().padStart(2, '0');
+        let day = today.getDate().toString().padStart(2, '0');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+
+    <footer style="margin-top: 20px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/offline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/offline.html
new file mode 100644
index 00000000..3ab9890e
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/offline.html
@@ -0,0 +1,798 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>You're Offline - The MovieVerse</title>
+    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/offline.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:title" content="You're Offline - The MovieVerse">
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/offline.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="You're Offline - The MovieVerse">
+    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body class="movie-details-body">
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="center-text" style="padding: 150px;">
+        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">You're Offline</div>
+        <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
+        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 500px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/privacy-policy.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/privacy-policy.html
new file mode 100644
index 00000000..f40bf2dc
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/privacy-policy.html
@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Privacy Policy - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta property="og:title" content="Privacy Policy - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Privacy Policy - The MovieVerse">
+    <meta name="twitter:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <meta name="theme-color" content="#7378c5">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        .content-area {
+            margin: 0 auto;
+            max-width: 800px;
+            padding: 0;
+            text-align: center;
+        }
+        #linkWeb {
+            color: white;
+        }
+        #linkWeb:hover {
+            color: #ff8623;
+            text-decoration: underline;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+                margin-top: 10px;
+            }
+        }
+        @media (min-width: 900px) {
+            header {
+                margin-top: 4px !important;
+            }
+        }
+        header {
+            margin-top: -5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        h2 {
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+            #form1 {
+                margin-top: 5px !important;
+            }
+        }
+        #form1 {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -20px; margin-top: -5px !important;" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='https://movie-verse.com'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#introduction">Introduction</a></li>
+            <li><a href="#consent">Consent</a></li>
+            <li><a href="#subheading2">Information We Collect</a></li>
+            <li><a href="#subheading">How We Use Your Information</a></li>
+            <li><a href="#subheading3">Log Files</a></li>
+            <li><a href="#subheading4">Cookies and Web Beacons</a></li>
+            <li><a href="terms-of-service.html">Terms of Service</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main class="content-area" style="text-align: center">
+        <div style="text-align: center; width: 90%; margin-top: 25px">
+            <div style="font-weight: bold; font-size: 30px" id="privacy-header">Privacy Policy</div>
+        </div>
+        <div id="introduction" style="text-align: center; width: 90%">
+            <h2 style="cursor: pointer">Introduction</h2>
+            <p>At The MovieVerse, accessible from <a id="linkWeb" href="https://movie-verse.com">https://movie-verse.com</a>, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by The MovieVerse and how we use it.</p>
+        </div>
+        <div id="consent" style="text-align: center; width: 90%">
+            <h2 style="cursor: pointer">Consent</h2>
+            <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms. For our Terms and Conditions, please visit the <a id="linkWeb" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">Terms and Conditions</a> page.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading2">
+            <h2 style="cursor: pointer">Information we collect</h2>
+            <p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
+            <p>If you contact us directly, we may receive additional information about you such as your name, email address, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
+        </div>
+        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading">
+            <h2 style="cursor: pointer">How we use your information</h2>
+            <p>We use the information we collect in various ways, including to:</p>
+            <ul style="color: white; list-style: none; width: 90%">
+                <li>1. Provide, operate, and maintain our website</li>
+                <li>2. Improve, personalize, and expand our website</li>
+                <li>3. Understand and analyze how you use our website</li>
+                <li>4. Develop new products, services, features, and functionality</li>
+                <li>5. Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
+                <li>6. Send you emails</li>
+                <li>7. Find and prevent fraud</li>
+                <li>8. Log Files</li>
+            </ul>
+        </div>
+        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading3">
+            <h2 style="cursor: pointer">Log Files</h2>
+            <p>The MovieVerse follows a standard procedure of using log files.</p>
+            <p>These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics.</p>
+            <p>These are not linked to any information that is personally identifiable.</p>
+            <p>The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
+        </div>
+        <div style="text-align: center; margin-bottom: 300px; width: 90%; cursor: pointer" id="subheading4">
+            <h2 style="cursor: pointer">Cookies and Web Beacons</h2>
+            <p>Like any other website, The MovieVerse uses 'cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited.</p>
+            <p>The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
+            <p>We may analyze user behavior through the use of cookies and web beacons with Google Analytics. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. We partner with Google to use the data collected to track and monitor the use of our website.</p>
+            <p>For more general information on cookies, please read <a id="linkWeb" href="https://www.cookieconsent.com/what-are-cookies/">"What Are Cookies"</a>.</p>
+        </div>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script src="../js/privacy-policy.js"></script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/profile.ejs b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/profile.ejs
new file mode 100644
index 00000000..9fd52920
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/profile.ejs
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Profile</title>
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/profile">Profile</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <section class="profile-container">
+        <h1>User Profile</h1>
+        <% if (user) { %>
+            <div class="profile-info">
+                <img src="<%= user.avatar %>" alt="Profile Avatar" class="profile-avatar">
+                <h2><%= user.name %></h2>
+                <p>Email: <%= user.email %></p>
+                <p>Location: <%= user.location %></p>
+                <p>Member since: <%= user.createdAt %></p>
+                <p>Favorite Movies:</p>
+                <ul>
+                    <% user.favoriteMovies.forEach(movie => { %>
+                        <li><%= movie.title %></li>
+                    <% }) %>
+                </ul>
+                <p>Favorite Genres:</p>
+                <ul>
+                    <% user.favoriteGenres.forEach(genre => { %>
+                        <li><%= genre %></li>
+                    <% }) %>
+                </ul>
+                <p>Favorite Actors:</p>
+                <ul>
+                    <% user.favoriteActors.forEach(actor => { %>
+                        <li><%= actor.name %></li>
+                    <% }) %>
+                </ul>
+                <p>
+                    <a href="/profile/edit">Edit Profile</a>
+                </p>
+            </div>
+        <% } else { %>
+            <p>User not found.</p>
+        <% } %>
+    </section>
+</main>
+<footer>
+    <p>&copy; 2024 The MovieVerse. All rights reserved.</p>
+</footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/reset-password.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/reset-password.html
new file mode 100644
index 00000000..3727e104
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/reset-password.html
@@ -0,0 +1,1097 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Reset Password - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html">
+    <meta property="og:title" content="Reset Password - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Reset Password - The MovieVerse">
+    <meta name="twitter:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        .password-reset-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+
+        .password-reset-form-container input[type="email"],
+        .password-reset-form-container input[type="password"],
+        .password-reset-form-container input[type="text"],
+        .password-reset-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+
+        #local-time {
+            transform: translateX(12%);
+        }
+
+        .password-reset-form-container button[type="submit"],
+        .password-reset-form-container button[type="button"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .password-reset-form-container button:hover {
+            background-color: #22254b;
+            color: white;
+        }
+
+        .password-reset-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .password-reset-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+
+        #my-heading {
+            margin-top: 24px !important;
+        }
+
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <div class="password-reset-form-container" id="password-reset-form-container" style="margin-bottom: 300px">
+        <form id="resetPasswordForm">
+            <h2>Reset Password</h2>
+            <p style="color: black">Forgot your password? No worries! Enter your email to verify your account and reset your password.</p>
+            <input type="email" id="resetEmail" placeholder="Enter your email" required>
+            <button type="submit">Verify Account</button>
+            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
+        </form>
+        <div id="newPasswordFields" style="display: none;">
+            <p style="color: black">Great news! Your account has been verified. Now, enter and confirm your new password below.</p>
+            <input type="password" id="newPassword" placeholder="New Password" required>
+            <input type="password" id="confirmNewPassword" placeholder="Confirm New Password" required>
+            <div style="margin-top: 10px; margin-bottom: 10px">
+                <label>
+                    <input type="checkbox" id="togglePassword"> Show Password
+                </label>
+            </div>
+            <button type="button" id="updatePasswordButton">Update Password</button>
+        </div>
+    </div>
+
+    <footer style="margin-top: 750px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <script src="../js/reset-password.js" type="module"></script>
+
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('newPassword');
+            const confirmPasswordInput = document.getElementById('confirmNewPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+                confirmPasswordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+                confirmPasswordInput.type = 'password';
+            }
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+    </script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/search.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/search.html
new file mode 100644
index 00000000..683f51f8
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/search.html
@@ -0,0 +1,921 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
+<head>
+    <meta charset="UTF-8">
+    <title>Search Results - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:title" content="Search Results - The MovieVerse">
+    <meta property="og:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/search.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/search.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Search Results - The MovieVerse">
+    <meta name="twitter:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <script src="../js/search.js"></script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #local-time {
+            margin-left: 5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #ad-container {
+            display: block !important;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px" class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <main id="movie-match-main" style="margin-top: 10px; margin-bottom: 150px">
+        <h2 id="search-results-label">Search Results</h2>
+        <div class="category-buttons">
+            <button data-category="movie" onclick="showResults('movie')">Movies</button>
+            <button data-category="tv" onclick="showResults('tv')">TV Series</button>
+            <button data-category="person" onclick="showResults('person')">People</button>
+        </div>
+        <button id="toggle-filters-btn">Filter & Sort Results</button>
+        <!-- Filters for Movies -->
+        <div id="movie-tv-filters" style="display: none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="genre-filter">Genre:</label>
+            <select id="genre-filter">
+                <option value="">Select Genre</option>
+                <!-- Populated with genres -->
+            </select>
+            <label for="language-filter">Language:</label>
+            <select id="language-filter">
+                <option value="">Select Language</option>
+            </select>
+            <label for="year-filter">Year:</label>
+            <input type="number" id="year-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
+            <label style="vertical-align: center" for="rating-filter">Rating:</label>
+            <input type="range" id="rating-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
+            <span id="rating-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-movie"><strong>Sort by:</strong></label>
+            <select id="sort-movie" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
+        </div>
+        <!-- Filters for TV Series -->
+        <div id="tv-filters" style="display: none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="genre-tv-filter">Genre:</label>
+            <select id="genre-tv-filter">
+                <option value="">Select Genre</option>
+                <!-- Populated with genres -->
+            </select>
+            <label for="language-tv-filter">Language:</label>
+            <select id="language-tv-filter">
+                <option value="">Select Language</option>
+            </select>
+            <label for="year-tv-filter">Year:</label>
+            <input type="number" id="year-tv-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
+            <label style="vertical-align: center" for="rating-tv-filter">Rating:</label>
+            <input type="range" id="rating-tv-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
+            <span id="rating-tv-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-tv"><strong>Sort by:</strong></label>
+            <select id="sort-tv" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
+        </div>
+        <!-- Filters for People -->
+        <div id="people-filters" style="display:none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="profession-filter">Profession:</label>
+            <select id="profession-filter">
+                <option value="">Select Profession</option>
+                <option value="Acting">Acting</option>
+                <option value="Directing">Directing</option>
+            </select>
+            <label for="gender-filter">Gender:</label>
+            <select id="gender-filter">
+                <option value="">Select Gender</option>
+                <option value="2">Male</option>
+                <option value="1">Female</option>
+            </select>
+            <label for="popularity-filter">Popularity Score:</label>
+            <input type="range" id="popularity-filter" min="0" max="100" step="1" value="5" title="Popularity" />
+            <span id="popularity-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-people"><strong>Sort by:</strong></label>
+            <select id="sort-people" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+            </select>
+        </div>
+        <div id="movie-match-container1" class="movie-match-container1">
+            <main id="results"></main>
+        </div>
+    </main>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" style="bottom: 90px; right: 10px; z-index: 10012" title="Back to top">Back to Top</button>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 10012" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w300${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/settings.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/settings.html
new file mode 100644
index 00000000..3780f1f0
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/settings.html
@@ -0,0 +1,1231 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>App Settings - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/settings.html">
+    <meta property="og:title" content="App Settings - The MovieVerse">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/settings.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.webp"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="App Settings - The MovieVerse">
+    <meta name="twitter:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.webp"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .settings-container {
+            text-align: center;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .settings-section {
+            margin-bottom: 30px;
+            width: 80%;
+            max-width: 500px;
+        }
+        .settings-section select,
+        .settings-section input[type="color"] {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: 2px solid #7378c5;
+            background-color: #22254b;
+            color: white;
+            font-size: 16px;
+            margin-top: 10px;
+        }
+        .settings-section h2 {
+            color: #ff8623;
+            margin-bottom: 10px;
+        }
+        .settings-section label {
+            font-size: 20px;
+            color: #ff8623;
+            display: block;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #reset-button {
+            display: block;
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            font-size: 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            margin: 20px auto;
+        }
+        #reset-button:hover {
+            background-color: #7378c5;
+            transition: background-color 0.3s ease;
+        }
+        #search-results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            margin-left: 25px;
+        }
+        #search-title {
+            margin: 0;
+        }
+        .button-group button {
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            font-size: 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        .button-group button:hover {
+            background-color: #7378c5;
+            transition: background-color 0.3s ease;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            #heading {
+                margin-top: -5px;
+            }
+            #my-heading {
+                margin-top: 25px !important;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .image-container {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+            background-color: #7378c5;
+            text-align: center;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            cursor: pointer;
+        }
+        .image-container:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        .image-container img {
+            margin-left: 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: transform 0.2s;
+        }
+        .image-container img:hover {
+            transform: scale(1.1);
+        }
+        .image-container input[type="checkbox"] {
+            margin-right: 10px;
+        }
+        .image-name {
+            margin-left: 10px;
+            font-size: 1rem;
+            color: #fff;
+        }
+        #delete-selected-images-btn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            display: inline-block;
+            font: inherit;
+            margin: 20px auto;
+        }
+        #delete-selected-images-btn:hover {
+            background-color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="heading">
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 5px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <main id="settings-container" class="settings-container" style="margin-bottom: 50px">
+        <!-- Background Setting -->
+        <div class="settings-section">
+            <h2>Change App Background</h2>
+            <select id="background-select" style="font: inherit">
+                <option style="font: inherit" value="../../images/universe-1.webp">Default</option>
+                <option style="font: inherit" value="../../images/universe-2.webp">Universe 1</option>
+                <option style="font: inherit" value="../../images/universe-22.webp">Universe 2</option>
+                <option style="font: inherit" value="../../images/universe-3.webp">Universe 3</option>
+                <option style="font: inherit" value="../../images/universe-4.webp">Universe 4</option>
+                <option style="font: inherit" value="../../images/universe-5.webp">Universe 5</option>
+                <option style="font: inherit" value="../../images/universe-6.webp">Universe 6</option>
+                <option style="font: inherit" value="../../images/universe-7.webp">Universe 7</option>
+                <option style="font: inherit" value="../../images/universe-8.webp">Universe 8</option>
+                <option style="font: inherit" value="../../images/universe-9.webp">Universe 9</option>
+                <option style="font: inherit" value="../../images/universe-10.webp">Universe 10</option>
+                <option style="font: inherit" value="../../images/universe-11.webp">Universe 11</option>
+                <option style="font: inherit" value="../../images/universe-12.webp">Universe 12</option>
+                <option style="font: inherit" value="../../images/universe-13.webp">Universe 13</option>
+                <option style="font: inherit" value="../../images/universe-14.webp">Universe 14</option>
+                <option style="font: inherit" value="../../images/universe-15.webp">Universe 15</option>
+                <option style="font: inherit" value="../../images/universe-16.webp">Universe 16</option>
+                <option style="font: inherit" value="../../images/universe-17.webp">Universe 17</option>
+                <option style="font: inherit" value="../../images/universe-18.webp">Universe 18</option>
+                <option style="font: inherit" value="../../images/universe-19.webp">Universe 19</option>
+                <option style="font: inherit" value="../../images/universe-20.webp">Universe 20</option>
+                <option style="font: inherit" value="../../images/universe-21.webp">Universe 21</option>
+                <option style="font: inherit" value="../../images/universe.webp">Universe 22</option>
+                <option style="font: inherit" value="../../images/universe-23.webp">Universe 23</option>
+                <option style="font: inherit" value="../../images/black.webp">Black</option>
+                <option style="font: inherit" value="../../images/grey.webp">Grey</option>
+                <option style="font: inherit" value="../../images/blue.webp">Blue</option>
+                <option style="font: inherit" value="../../images/silver.webp">Silver</option>
+                <option style="font: inherit" value="../../images/gold.webp">Gold</option>
+                <option style="font: inherit" value="../../images/rose.webp">Rose</option>
+                <option style="font: inherit" value="../../images/pink.webp">Pink</option>
+                <option style="font: inherit" value="../../images/red.webp">Red</option>
+                <option style="font: inherit" value="../../images/green.webp">Green</option>
+                <option style="font: inherit" value="../../images/brown.webp">Brown</option>
+                <option style="font: inherit" value="../../images/purple.webp">Purple</option>
+                <option style="font: inherit" value="../../images/orange.webp">Orange</option>
+                <option style="font: inherit" value="../../images/yellow.webp">Light Yellow</option>
+            </select>
+        </div>
+        <div class="settings-section">
+            <h2>Upload A Custom Background</h2>
+            <input type="file" id="custom-bg-upload" accept="image/*" style="margin-bottom: 10px; padding-left: 10px; font: inherit">
+            <input type="text" id="custom-bg-name" placeholder="Enter image name..." style="margin-bottom: 10px; font: inherit">
+            <div class="button-group">
+                <button id="upload-bg-btn" style="font: inherit">Upload</button>
+                <button id="delete-uploaded-btn" style="font: inherit">Delete Uploaded Images</button>
+            </div>
+        </div>
+        <div class="settings-section" id="delete-images-section" style="display: none;">
+            <h2>Select Images to Delete</h2>
+            <div id="custom-images-container"></div>
+            <button id="delete-selected-images-btn">Delete Selected Images</button>
+        </div>
+        <!-- Text Color Setting -->
+        <div class="settings-section">
+            <h2>Change Text Color</h2>
+            <label for="text-color-input">Text Color:</label>
+            <input type="color" style="min-height: 50px" id="text-color-input">
+        </div>
+        <!-- Font Size Setting -->
+        <div class="settings-section">
+            <h2>Change Font Size</h2>
+            <label style="font: inherit" for="font-size-select">Font Size:</label>
+            <select style="font: inherit" id="font-size-select">
+                <option style="font: inherit" value="small">Small</option>
+                <option style="font: inherit" value="medium" selected>Medium</option>
+                <option style="font: inherit" value="large">Large</option>
+            </select>
+        </div>
+        <button style="font: inherit" id="reset-button">Reset to Defaults</button>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 200px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/settings.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, span, div, button, input, select, textarea').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/sign-in.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/sign-in.html
new file mode 100644
index 00000000..40df0ef7
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/sign-in.html
@@ -0,0 +1,1077 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Sign In - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Sign In - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Sign In - The MovieVerse">
+    <meta name="twitter:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+        #local-time {
+            transform: translateX(12%);
+        }
+        .sign-in-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .sign-in-form-container h1 {
+            color: black;
+        }
+        .sign-in-form-container p {
+            color: black;
+        }
+        .sign-in-form-container input[type="email"],
+        .sign-in-form-container input[type="password"],
+        .sign-in-form-container input[type="text"],
+        .sign-in-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .sign-in-form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .sign-in-form-container button[type="button"] {
+            background-color: #f0f0f0;
+            color: #333;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #createAccountBtn:hover {
+            background-color: #d3d3d3;
+            color: #1B1B1B;
+        }
+        .sign-in-form-container button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .sign-in-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .sign-in-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+        header {
+            margin-top: -5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="sign-in-form-container" style="margin-bottom: 390px">
+        <form id="signInForm">
+            <h2>Sign In</h2>
+            <p>Sign in to save your stats, watchlists, get personalized movie recommendation, join our community, and more!</p>
+            <input type="email" id="signInEmail" placeholder="Email" required>
+            <input type="password" id="signInPassword" placeholder="Password" required>
+            <label style="margin-top: 10px; margin-bottom: 10px">
+                <input type="checkbox" id="togglePassword"> Show Password
+            </label>
+            <button type="submit">Sign In</button>
+            <button type="button" id="createAccountBtn">Create an Account</button>
+            <p>Forgot password? Click <a style="text-decoration: underline" id="githubLink1" href="reset-password.html">below</a> to reset it.</p>
+            <button type="button" id="resetPasswordBtn" onclick="window.location.href='reset-password.html'">Reset Password</button>
+        </form>
+    </div>
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('signInPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/sign-in.js" type="module"></script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/support.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/support.html
new file mode 100644
index 00000000..a02e4a31
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/support.html
@@ -0,0 +1,1101 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Support - The MovieVerse</title>
+    <meta name="description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/support.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/support.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta property="og:title" content="Support - The MovieVerse">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Support - The MovieVerse">
+    <meta name="twitter:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .form-container h1 {
+            color: #ff8623;
+        }
+        .form-container input,
+        .form-container textarea,
+        .form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .form-container button[type="submit"]:hover {
+            background-color: #ff8623;
+        }
+        .form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #supportBtn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            margin-top: 20px;
+        }
+        #supportBtn:hover {
+            background-color: #ff8623;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        @media (min-width: 900px) {
+            #my-heading {
+                margin-top: 15px !important;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body class="movie-details-body">
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="form-container">
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Contact Support</div>
+        <p style="color: black">Have a question or need help? Contact us and we'll take a look at your request as soon as possible.</p>
+        <form action="https://formspree.io/f/xdoqzzao" method="POST">
+            <input type="text" id="name" name="name" placeholder="Your Name" required>
+            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
+            <textarea id="message" name="message" placeholder="Your Message" required></textarea>
+            <button type="submit">Send Message</button>
+            <p style="color: black">Have a feedback for us? Or any suggestions to improve our app? Click the button below to be redirected to the feedback page.</p>
+        </form>
+        <button id="supportBtn" onclick="window.location.href='feedback.html'" title="Submit a feedback">Submit Feedback</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        function updateClock() {
+            var now = new Date();
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            hours = hours < 10 ? '0' + hours : hours;
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            var timeString = hours + ':' + minutes;
+            document.getElementById('clock').innerHTML = timeString;
+        }
+
+        setInterval(updateClock, 1000);
+        window.onload = updateClock;
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+
+    <footer style="margin-top: 400px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/terms-of-service.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/terms-of-service.html
new file mode 100644
index 00000000..23daac13
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/terms-of-service.html
@@ -0,0 +1,399 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Terms of Service - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta property="og:title" content="Terms of Service - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Terms of Service - The MovieVerse">
+    <meta name="twitter:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        .content-area {
+            margin: 0 auto;
+            max-width: 800px;
+            padding: 0;
+            text-align: center;
+        }
+        #mail {
+            color: white;
+        }
+        #mail:hover {
+            color: #ff8623;
+            text-decoration: underline;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            header {
+                margin-top: -5px;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        h2 {
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#agreement">Agreement to Terms</a></li>
+            <li><a href="#consent">Changes to Terms</a></li>
+            <li><a href="#subheading2">Use of Service</a></li>
+            <li><a href="#subheading">Content</a></li>
+            <li><a href="#subheading3">Ads</a></li>
+            <li><a href="#subheading4">Accounts</a></li>
+            <li><a href="#subheading5">Intellectual Property</a></li>
+            <li><a href="#subheading6">Links To Other Web Sites</a></li>
+            <li><a href="#subheading7">Termination</a></li>
+            <li><a href="#subheading8">Disclaimer</a></li>
+            <li><a href="#subheading9">Governing Law</a></li>
+            <li><a href="#subheading10">Contact Us</a></li>
+            <li><a href="privacy-policy.html">Privacy Policy</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main class="content-area">
+        <div style="text-align: center; width: 90%">
+            <div style="font-weight: bold; font-size: 28px; margin-top: 10px; color: #ff8623" id="tos-header">Terms of Service</div>
+        </div>
+        <div style="text-align: center; width: 90%" id="agreement">
+            <h2 style="cursor: pointer">Agreement to Terms</h2>
+            <p>By using The MovieVerse, you agree to be bound by these terms. If you disagree with any part of the terms, then you do not have permission to access the service.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="consent">
+            <h2 style="cursor: pointer">Changes to Terms</h2>
+            <p>We reserve the right to modify or replace these Terms at any time at our sole discretion. We will try to provide at least 30 days' notice prior to any new terms taking effect.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading2">
+            <h2 style="cursor: pointer">Use of Service</h2>
+            <p>The MovieVerse is provided on an "AS IS" and "AS AVAILABLE" basis. The service is for personal, non-commercial use only.</p>
+            <p>You may not use the service for any illegal or unauthorized purpose. You must not, in the use of the service, violate any laws in your jurisdiction.</p>
+            <p>You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the service, use of the service, or access to the service without express written permission by us.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading">
+            <h2 style="cursor: pointer">Content</h2>
+            <p>Content found on or through this Service are the property of The MovieVerse or used with permission. You may not distribute, modify, transmit, reuse, download, repost, copy, or use said Content, whether in whole or in part, for commercial purposes or for personal gain, without express advance written permission from us.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading3">
+            <h2 style="cursor: pointer">Ads</h2>
+            <p>During use of the Service, you may enter into correspondence with or participate in promotions of advertisers or sponsors showing their goods or services through the Service. Any such activity, and any terms, conditions, warranties or representations associated with such activity, is solely between you and the applicable third-party.</p>
+            <p>We display ads on the Service to help us keep our servers and databases running and free for everyone. We're committed to placing non-intrusive ads only, which means no pop-ups, no auto-playing videos, and no ads that interfere with your experience on the site.</p>
+            <p>If you encounter any ads that are inappropriate, misleading, or intrusive, please let us know by contacting us at using the Feedback form <a style="color: white" href="feedback.html">here</a>.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading4">
+            <h2 style="cursor: pointer">Accounts</h2>
+            <p>When you create an account with us, you guarantee that the information you provide us is accurate, complete, and current at all times. Inaccurate, incomplete, or obsolete information may result in the immediate termination of your account on the Service.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading5">
+            <h2 style="cursor: pointer">Intellectual Property</h2>
+            <p>The Service and its original content, features, and functionality are and will remain the exclusive property of The MovieVerse and its licensors.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading6">
+            <h2 style="cursor: pointer">Links To Other Web Sites</h2>
+            <p>Our Service may contain links to third-party web sites or services that are not owned or controlled by The MovieVerse. We have no control over, and assume no responsibility for the content, privacy policies, or practices of any third-party web sites or services.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading7">
+            <h2 style="cursor: pointer">Termination</h2>
+            <p>We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of the Terms.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading8">
+            <h2 style="cursor: pointer">Disclaimer</h2>
+            <p>Your use of the Service is at your sole risk. The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading9">
+            <h2 style="cursor: pointer">Governing Law</h2>
+            <p>These Terms shall be governed and construed in accordance with the laws of the country where The MovieVerse is based (the United States of America), without regard to its conflict of law provisions.</p>
+            <p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
+        </div>
+        <div style="text-align: center; width: 90%; margin-bottom: 300px" id="subheading10">
+            <h2 style="cursor: pointer">Contact Us</h2>
+            <p>If you have any questions about these Terms, please contact us at <a id="mail" href="mailto:info@movie-verse.com">info@movie-verse.com</a>.</p>
+        </div>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script src="../js/terms-of-service.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/trivia.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/trivia.html
new file mode 100644
index 00000000..d2bc5201
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/trivia.html
@@ -0,0 +1,1173 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>MovieVerse Trivia - Test Your Movie Knowledge</title>
+    <link rel="stylesheet" href="../css/trivia.css">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html">
+    <meta property="og:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html" />
+    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
+    <meta name="twitter:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        label {
+            cursor: pointer;
+        }
+        label:hover {
+            color: #f509d9;
+        }
+        #my-heading {
+            margin-top: 25px;
+        }
+        @keyframes dropIn {
+            0% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: dropIn 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 0.5s;
+        }
+        #form {
+            margin-top: 16px;
+        }
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+            #form {
+                margin-top: 0;
+            }
+        }
+        #ad-container1 {
+            display: block;
+        }
+        #githubLink {
+            color: white !important;
+        }
+        #githubLink:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @media (min-width: 768px) {
+            #my-heading {
+                margin-top: 19px;
+            }
+            #form {
+                margin-top: 10px;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-bottom: -50px; margin-top: 9px">
+        <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 215px" class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="#0">Question 1</a></li>
+            <li><a href="#1">Question 2</a></li>
+            <li><a href="#2">Question 3</a></li>
+            <li><a href="#3">Question 4</a></li>
+            <li><a href="#4">Question 5</a></li>
+            <li><a href="#5">Question 6</a></li>
+            <li><a href="#6">Question 7</a></li>
+            <li><a href="#7">Question 8</a></li>
+            <li><a href="#8">Question 9</a></li>
+            <li><a href="#9">Question 10</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <div>
+        <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
+    </div>
+    <div id="result-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Trivia Results</h3>
+                <span class="close-button" title="Close the trivia results modal">&times;</span>
+            </div>
+            <div id="progress-circle" class="progress-circle">
+                <div id="correct-answers"></div>
+            </div>
+            <p id="result-text"></p>
+        </div>
+    </div>
+    <main id="main"></main>
+    <form id="quiz-form" style="margin-bottom: 50px">
+        <div id="quiz-container"></div>
+        <button type="button" id="regenerate-questions" class="button" style="color: black">Get New Questions</button>
+        <button type="submit" id="submit" class="button" style="color: black">Submit Answers</button>
+    </form>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0; color: white">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="color: white; margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/quiz.js" type="module"></script>
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p id="footerP" style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" id="back-top">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+
+        document.getElementById('back-top').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/tv-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/tv-details.html
new file mode 100644
index 00000000..6898fd09
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/tv-details.html
@@ -0,0 +1,938 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>TV Series Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/tv-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="TV Series Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="TV Series Details - The MovieVerse">
+    <meta name="twitter:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #rating {
+            color: white !important;
+        }
+        #rating:hover {
+            color: #ff8623 !important;
+        }
+        #favorite-btn:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        .favorited:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #homepage {
+            color: white;
+        }
+        #homepage:hover {
+            color: #ff8623;
+        }
+        #prod-companies {
+            color: white;
+        }
+        #prod-companies:hover {
+            color: #ff8623;
+        }
+        header {
+            margin-top: 9px;
+        }
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            header {
+                margin-top: -5px;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .cast-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+        }
+        .cast-member-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            margin: 5px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .cast-member-image {
+            width: 100%;
+            height: 155px;
+            object-fit: cover !important;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .cast-member-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .cast-member-details {
+            width: 100%;
+        }
+        .cast-member-name, .cast-member-role {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+            white-space: normal;
+            text-align: center;
+        }
+        .similar-tv-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+        }
+        .similar-tv-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .similar-tv-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .similar-tv-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .similar-tv-name {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+        .similar-tv-link {
+            text-decoration: none;
+            color: #333;
+        }
+        #movie-details-container {
+            margin-top: 20px;
+        }
+        @media (max-width: 767px) {
+            #movie-details-container {
+                margin-top: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+    <main id="main" style="margin-left: 35px; height: 0"></main>
+    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px;">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading TV Series Details..." style="width: 25vw; border-radius: 8px" title="Click to view full-size image" />
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
+            <div id="comments-section">
+                <h3>TV Show Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Comments Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This TV Series</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
+                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this TV series">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right" style="position: relative; overflow: hidden">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/tv-details.js"></script>
+    <script src="../js/add-to-tv-favorites.js" type="module"></script>
+    <script type="module">
+        import { toggleFavoriteTVSeries, checkAndUpdateFavoriteButtonTVSeries } from '../js/add-to-tv-favorites.js';
+        document.addEventListener('DOMContentLoaded', () => {
+            const favoriteBtn = document.getElementById('favorite-btn');
+            if (favoriteBtn) {
+                favoriteBtn.addEventListener('click', toggleFavoriteTVSeries);
+            }
+        });
+        checkAndUpdateFavoriteButtonTVSeries();
+    </script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('movie-image').addEventListener('click', function() {
+            let imageUrl = this.src.replace('w780', 'w1280');
+            const modalHtml = `<div id="image-modal" style="z-index: 10000002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                    <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="TV Series Poster" />
+                                    <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                               </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+    <script src="../js/comments-tv.js" type="module"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/user-profile.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/user-profile.html
new file mode 100644
index 00000000..98b22596
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/user-profile.html
@@ -0,0 +1,1337 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>User Profile - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="User Profile - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html" />
+    <meta property="og:site_name" content="User Profile - The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="User Profile - The MovieVerse">
+    <meta name="twitter:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        h1 {
+            color: #ff8623;
+        }
+        h1:hover {
+            color: #f509d9;
+            transition: 0.1s ease;
+        }
+        .profile-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .profile-container input[type="text"],
+        .profile-container input[type="date"],
+        .profile-container input[type="file"],
+        .profile-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .profile-container button {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .profile-container button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .profile-container h2, .profile-container p {
+            color: black;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+            padding-top: 60px;
+        }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 5% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 400px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(5px);
+        }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
+        .close:hover,
+        .close:focus {
+            color: #ff8623;
+            text-decoration: none;
+            cursor: pointer;
+        }
+        #editProfileModal {
+            z-index: 1000;
+            width: 100vw !important;
+        }
+        #editProfileModal .modal-content {
+            background-color: #373b69;
+            width: 400px !important;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
+        }
+        #editProfileForm input {
+            font: inherit;
+            border-radius: 8px;
+        }
+        #editProfileForm button {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #editProfileForm button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .modal-header h2 {
+            margin: 0;
+            flex-grow: 1;
+        }
+        .modal-content {
+            padding-bottom: 20px;
+        }
+        .dob-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .dob-container label {
+            margin-right: 10px;
+            margin-top: 10px;
+            color: black;
+        }
+        .dob-container input[type="date"] {
+            flex-grow: 1;
+        }
+        .profile-image-container {
+            position: relative;
+            display: inline-block;
+        }
+        #removeProfileImage {
+            position: absolute;
+            top: 0;
+            background: none;
+            border: none;
+            color: red;
+            font-size: 30px;
+            font-weight: bold;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            margin: 0;
+        }
+        #removeProfileImage:hover {
+            color: #ff8623;
+        }
+        #editProfileForm .modal-content h2 {
+            color: #ff8623;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        #editProfileForm .modal-content label {
+            color: #fff;
+            margin-bottom: 10px;
+            display: block;
+        }
+        #editProfileForm .modal-content input[type="text"],
+        #editProfileForm .modal-content textarea {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            border: 1px solid #7378c5;
+            background-color: #22254b;
+            color: #fff;
+        }
+        #editProfileForm .modal-content button {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            margin: 10px auto;
+            transition: background-color 0.3s ease;
+        }
+        #editProfileForm .modal-content select {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            border: 1px solid #7378c5;
+            background-color: #22254b;
+            color: #fff;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0 !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script src="../js/user-profile.js" type="module"></script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div id="welcomeMessage" style="color: #ff8623; font-weight: bold; font-size: 30px; text-align: center; margin-top: 30px;"></div>
+    <div class="search-users-container" id="search-users-container">
+        <input type="text" id="searchUserInput" placeholder="Search For Any MovieVerse User..." title="Remember that this search is case-sensitive!" />
+        <button id="searchUserBtn">Search</button>
+    </div>
+    <div id="searchUserResults" class="search-results-container"></div>
+    <button id="viewMyProfileBtn" style="margin-top: 20px;">View My Profile</button>
+    <div id="profileContainer" class="profile-container">
+        <div class="profile-image-container">
+            <img id="profileImage" style="cursor: pointer" title="Click to upload a new profile image" onclick="document.getElementById('imageUpload').click()" src="../../images/user-default.png" alt="Profile Image" />
+            <button id="removeProfileImage" title="Click to remove the current profile image" style="display: none;">&times;</button>
+        </div>
+        <input type="file" id="imageUpload" accept="image/*" hidden />
+        <button id="changeProfileImageBtn" onclick="document.getElementById('imageUpload').click()">Change Profile Image</button>
+        <div class="profile-info">
+            <div id="averageDisplays" style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
+                <div class="progress-container" id="container1" style="cursor: pointer">
+                    <svg class="progress-ring" width="100" height="100">
+                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
+                        <circle class="progress-ring__progress" id="avgMovieRatingCircle" cx="50" cy="50" r="40" />
+                        <text class="progress-ring__text" id="avgMovieRatingText" x="50" y="50"></text>
+                    </svg>
+                    <p><strong>Average Movie Rating</strong></p>
+                </div>
+                <div class="progress-container" id="container2" style="cursor: pointer">
+                    <svg class="progress-ring" width="100" height="100">
+                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
+                        <circle class="progress-ring__progress" id="avgTriviaScoreCircle" cx="50" cy="50" r="40" />
+                        <text class="progress-ring__text" id="avgTriviaScoreText" x="50" y="50"></text>
+                    </svg>
+                    <p><strong>Average Movie Trivia Score</strong></p>
+                </div>
+            </div>
+            <p id="usernameDisplay">Username: <span></span></p>
+            <p id="dobDisplay">Date of Birth: <span></span></p>
+            <p id="bioDisplay">Bio: <span></span></p>
+            <p id="favoriteGenresDisplay">Favorite Genres: <span></span></p>
+            <p id="locationDisplay">Location: <span></span></p>
+            <p id="favoriteMovieDisplay">Favorite Movie: <span></span></p>
+            <p id="hobbiesDisplay">Hobbies: <span></span></p>
+            <p id="favoriteActorDisplay"><strong>Favorite Actor:</strong> <span></span></p>
+            <p id="favoriteDirectorDisplay"><strong>Favorite Director:</strong> <span></span></p>
+            <p id="personalQuoteDisplay"><strong>Personal Quote:</strong> <span></span></p>
+            <p id="followingDisplay"><strong>Following:</strong> <span id="followingList"></span></p>
+            <p id="followersDisplay"><strong>Followers:</strong> <span id="followersList"></span></p>
+        </div>
+        <button id="editProfileBtn">Edit Profile Details</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <p id="signInPrompt" style="text-align: center; font-size: 24px; margin-top: 100px;"></p>
+    <div id="editProfileModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header" style="margin-bottom: 20px">
+                <h2>Edit Profile Details</h2>
+                <span class="close" onclick="closeModal()">&times;</span>
+            </div>
+            <form id="editProfileForm">
+                <div style="text-align: center">
+                    <label for="editUsername" style="color: white">Username:</label>
+                    <input type="text" id="editUsername" placeholder="Username">
+                </div>
+                <div style="text-align: center">
+                    <label for="editDob" style="color: white">Date of Birth:</label>
+                    <input type="date" id="editDob" style="padding-left: 5px; width: 100%" placeholder="Date of Birth" title="Click to select your date of birth"/>
+                </div>
+                <div style="text-align: center; margin-top: 20px">
+                    <label for="editBio" style="color: white">Bio:</label>
+                    <input type="text" id="editBio" placeholder="Bio">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteGenres" style="color: white">Favorite Genres:</label>
+                    <input type="text" id="editFavoriteGenres" placeholder="Favorite Genres">
+                </div>
+                <div style="text-align: center">
+                    <label for="editLocation" style="color: white">Location:</label>
+                    <input type="text" id="editLocation" placeholder="Location">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteMovie" style="color: white">Favorite Movie:</label>
+                    <input type="text" id="editFavoriteMovie" placeholder="Favorite Movie">
+                </div>
+                <div style="text-align: center">
+                    <label for="editHobbies" style="color: white">Hobbies:</label>
+                    <input type="text" id="editHobbies" placeholder="Hobbies">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteActor" style="color: white">Favorite Actor:</label>
+                    <input type="text" id="editFavoriteActor" placeholder="Favorite Actor">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteDirector" style="color: white">Favorite Director:</label>
+                    <input type="text" id="editFavoriteDirector" placeholder="Favorite Director">
+                </div>
+                <div style="text-align: center">
+                    <label for="editPersonalQuote" style="color: white">Personal Quote:</label>
+                    <input type="text" id="editPersonalQuote" placeholder="Personal Quote">
+                </div>
+                <button type="button" id="saveChanges">Save Changes</button>
+                <button type="button" id="cancelEdit" onclick="closeModal()">Cancel</button>
+            </form>
+        </div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        let today = new Date();
+        today.setFullYear(today.getFullYear() - 18);
+        let year = today.getFullYear();
+        let month = (today.getMonth() + 1).toString().padStart(2, '0');
+        let day = today.getDate().toString().padStart(2, '0');
+        let dateMinus18Years = `${year}-${month}-${day}`;
+        document.getElementById('editDob').value = dateMinus18Years;
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+    <footer style="margin-top: 800px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
index 89635dda..cbd545c2 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
@@ -535,7 +534,6 @@
         }
     </style>
 </head>
-
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -543,7 +541,6 @@
     gtag('js', new Date());
     gtag('config', 'G-CQKJ67FXZ4');
 </script>
-
 <body>
     <header id="homepage-header" style="margin-bottom: -10px">
         <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chat.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chat.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chatbot.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chatbot.js
index 47871124..30ad3a1f 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chatbot.js
@@ -3,6 +3,7 @@ import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/ge
 const chatbotInput = document.getElementById("chatbotInput");
 const chatbotBody = document.getElementById("chatbotBody");
 const movieee = `https://${getMovieVerseData()}/3`;
+
 let initialMainContent;
 let conversationHistory = [];
 
@@ -177,6 +178,7 @@ function updateMovieVisitCount(movieId, movieTitle) {
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
+
     movieVisits[movieId].count += 1;
 
     if (!uniqueMoviesViewed.includes(movieId)) {
@@ -219,6 +221,7 @@ function getMostVisitedMovie() {
 
 function getMostVisitedActor() {
     const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+
     let mostVisitedActor = '';
     let maxVisits = 0;
 
@@ -234,6 +237,7 @@ function getMostVisitedActor() {
 
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
@@ -264,63 +268,6 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
-function updateUniqueDirectorsViewed(directorId) {
-    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-    if (!viewedDirectors.includes(directorId)) {
-        viewedDirectors.push(directorId);
-        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
-    }
-}
-
-function updateActorVisitCount(actorId, actorName) {
-    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-    if (!actorVisits[actorId]) {
-        actorVisits[actorId] = { count: 0, name: actorName };
-    }
-
-    actorVisits[actorId].count += 1;
-    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
-}
-
-function updateDirectorVisitCount(directorId, directorName) {
-    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    if (!directorVisits[directorId]) {
-        directorVisits[directorId] = { count: 0, name: directorName };
-    }
-
-    directorVisits[directorId].count += 1;
-    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
-}
-
-function calculateMoviesToDisplay() {
-    const screenWidth = window.innerWidth;
-    if (screenWidth <= 689.9) return 10; // 1 movie per row
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -348,66 +295,20 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
             <span style="color: #ff8623;">MovieVerse Assistant:</span>
             <span style="display: inline-block; text-align: left; color: #fff;">
-                Welcome to MovieVerse Assistant! Here's how to get started:
+                Welcome to MovieVerse Assistant 🍿! Here's how to get started:
             </span>
         </div>
         <ul style="text-align: left; margin-bottom: 10px; color: #fff;">
             <li>To find details about a movie, type "Show me details about [movie name]".</li>
-            <li>To watch a movie trailer, type "Show trailer for [movie name]".</li>
-            <li>Or, if you just want quick information about a movie, type "Tell me about [movie name]" or "Do you know about [movie name]".</li>
             <li>You can also ask about genres, top-rated movies, latest movies, get a recommended movie, and any general questions!</li>
-            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like the first three pre-defined functionalities above, as they might trigger those specific functions instead of a broader search.</li> 
+            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like "Show me details about ...", as they might trigger specific functions instead of a broader search.</li> 
         </ul>
-        <div style="text-align: left; color: #fff;">How may I assist you today?</div>
+        <div style="text-align: left; color: #fff;">How may I assist you today? 🎬🍿</div>
     `;
     chatbotBody.innerHTML += `<div>${initialMessage}</div>`;
     scrollToBottom();
@@ -417,40 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -465,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -549,79 +383,21 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    if (lowerMessage.startsWith("do you know about ") ||
-        lowerMessage.startsWith("tell me about ") ||
-        lowerMessage.startsWith("what is ")) {
-        const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-        return await fetchMovieDetailsFromTMDB(movieName);
-    }
-    if (lowerMessage.startsWith("show me details about ") ||
-        lowerMessage.startsWith("i want to know more about ") ||
-        lowerMessage.startsWith("details about ") ||
-        lowerMessage.startsWith("search for ")) {
-        const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-        fetchAndRedirectToMovieDetails(movieName);
-        return `Searching for details about "${movieName}". Please wait...`;
-    }
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
         return `Searching for the trailer of "${movieName}". Please wait...`;
     }
+
     if (lowerMessage.startsWith("hello") || lowerMessage.startsWith("hi") || lowerMessage.startsWith("hey")) {
         return "Hello! How can I assist you with MovieVerse today?";
     }
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -629,7 +405,10 @@ async function movieVerseResponse(message) {
         let fullResponse = '';
         try {
             const genAI = new GoogleGenerativeAI(getAIResponse());
-            const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+            const model = genAI.getGenerativeModel({
+                model: "gemini-1.5-flash",
+                systemInstruction: "You are MovieVerse Assistant - an AI Chatbot of the MovieVerse App. You are here to help users with movie-related or any other general queries. You are trained and powered by MovieVerse AI and Google to provide the best assistance. You can also provide information about movies, actors, directors, genres, and companies, or recommend movies to users.",
+            });
 
             conversationHistory.push({ role: "user", parts: [{ text: message }] });
 
@@ -678,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
@@ -764,6 +544,7 @@ async function showMovieOfTheDay() {
 function fallbackMovieSelection() {
     const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
     const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+
     localStorage.setItem('selectedMovieId', randomFallbackMovie);
     window.location.href = 'movie-details.html';
 }
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/movie-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/movie-details.js
index 957fda89..5d9e8acf 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/movie-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/movie-details.js
@@ -1639,8 +1639,15 @@ function createImdbRatingCircle(imdbRating, imdbId) {
     if (imdbRating === 'N/A' || imdbRating === null || imdbRating === undefined) {
         imdbRating = 'N/A';
     }
-
-    imdbRating = imdbRating.toFixed(1);
+    else {
+        imdbRating = parseFloat(imdbRating);
+        if (!isNaN(imdbRating)) {
+            imdbRating = imdbRating.toFixed(1);
+        }
+        else {
+            imdbRating = 'N/A';
+        }
+    }
 
     let circleContainer = document.getElementById('imdbRatingCircleContainer');
     if (!circleContainer) {
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/sign-in.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/sign-in.js
index ca744c7d..dbb35fc4 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/sign-in.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/sign-in.js
@@ -58,7 +58,7 @@ document.getElementById('signInForm').addEventListener('submit', async function(
             alert('Successfully signed in!');
             localStorage.setItem('isSignedIn', JSON.stringify(true));
             localStorage.setItem('currentlySignedInMovieVerseUser', email);
-            window.location.href = '../../../../Downloads/The-MovieVerse-Database-ee3ec4ea5610d37178bc008fd505fd99c5f83070/index.html';
+            window.location.href = '../../index.html';
         } else {
             alert('Invalid email or password. Ensure that you have entered a correct combination of email and password - one that we have on file.');
         }
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/index.scss b/MovieVerse-Mobile/platforms/ios/www/css/index.scss
new file mode 100644
index 00000000..786e8d13
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/css/index.scss
@@ -0,0 +1,87 @@
+$font-family-poppins: "Poppins", sans-serif;
+$background-color-primary: #7378c5;
+$hover-color: #ff8623;
+$link-color: white;
+$link-hover-color: #f509d9;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: url("../../images/universe-1.png") no-repeat center center fixed;
+  background-size: cover;
+  font-family: $font-family-poppins;
+  margin: 0;
+  align-content: center;
+  overflow-x: hidden;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+
+%button-style {
+  background-color: $background-color-primary;
+  color: black;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  &:hover {
+    background-color: $hover-color;
+    transition: 0.3s ease-in;
+  }
+}
+
+#movie-match-btn {
+  @extend %button-style;
+  position: fixed;
+  bottom: 220px;
+  right: 20px;
+}
+
+#submit-comment {
+  @extend %button-style;
+  padding: 10px 15px;
+}
+
+%link-style {
+  color: $link-color;
+  text-decoration: underline;
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+
+#cast-info, #similar-tv, #director-link {
+  @extend %link-style;
+}
+
+@mixin modal-style {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-top: 5px;
+}
+
+.modal-header {
+  @include modal-style;
+}
+
+.comments-controls {
+  display: flex;
+  align-items: center;
+  button:disabled {
+    cursor: not-allowed;
+  }
+  &.justify-start {
+    justify-content: start;
+  }
+  &.justify-center {
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+  }
+}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/navbar.scss b/MovieVerse-Mobile/platforms/ios/www/css/navbar.scss
new file mode 100644
index 00000000..6ff9d8ec
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/css/navbar.scss
@@ -0,0 +1,97 @@
+$breakpoint-mobile: 480px;
+$breakpoint-tablet: 768px;
+$breakpoint-desktop: 1024px;
+
+$navbar-background-color: #333;
+$navbar-text-color: #fff;
+$navbar-hover-color: #555;
+$mobile-menu-background-color: #222;
+
+@mixin responsive-visibility {
+  @media (max-width: $breakpoint-mobile) {
+    display: none;
+  }
+}
+
+.navbar {
+  background-color: $navbar-background-color;
+  color: $navbar-text-color;
+  padding: 1em;
+
+  .logo {
+    float: left;
+    font-size: 1.5em;
+    margin-right: 15px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    float: right;
+
+    li {
+      display: inline;
+      margin-left: 15px;
+
+      a {
+        text-decoration: none;
+        color: $navbar-text-color;
+
+        &:hover {
+          color: $navbar-hover-color;
+        }
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-tablet) {
+    ul {
+      float: none;
+      text-align: center;
+
+      li {
+        display: block;
+        margin-top: 0.5em;
+      }
+    }
+  }
+}
+
+.mobile-menu-btn {
+  @include responsive-visibility;
+
+  display: inline-block;
+  background-color: $mobile-menu-background-color;
+  color: $navbar-text-color;
+  padding: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.mobile-menu {
+  display: none;
+
+  &.active {
+    display: block;
+    padding: 10px;
+    background-color: $mobile-menu-background-color;
+
+    ul {
+      text-align: center;
+
+      li {
+        margin-top: 10px;
+
+        a {
+          display: block;
+          color: $navbar-text-color;
+
+          &:hover {
+            background-color: $navbar-hover-color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/profile.scss b/MovieVerse-Mobile/platforms/ios/www/css/profile.scss
new file mode 100644
index 00000000..78f9b2e3
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/css/profile.scss
@@ -0,0 +1,83 @@
+$primary-color: #4A90E2;
+$secondary-color: #50E3C2;
+$text-color: #4A4A4A;
+$background-color: #F5F7FA;
+$padding-standard: 15px;
+$border-radius-standard: 5px;
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin card-style {
+  background-color: white;
+  border-radius: $border-radius-standard;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: $padding-standard;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  color: $text-color;
+  background-color: $background-color;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.profile-container {
+  @include flex-center;
+  flex-direction: column;
+}
+
+.profile-header {
+  @include flex-center;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  .profile-image {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    margin-bottom: $padding-standard;
+  }
+
+  .profile-name {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .profile-bio {
+    text-align: center;
+    margin-top: $padding-standard;
+  }
+}
+
+.profile-content {
+  @include card-style;
+  margin: 20px auto;
+  width: 90%;
+  max-width: 600px;
+
+  .section {
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    h2 {
+      border-bottom: 2px solid $primary-color;
+      padding-bottom: $padding-standard / 2;
+    }
+
+    p, ul {
+      margin-top: $padding-standard / 2;
+    }
+  }
+}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/reset.css b/MovieVerse-Mobile/platforms/ios/www/css/reset.css
new file mode 100644
index 00000000..7a836fce
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/css/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/style.css b/MovieVerse-Mobile/platforms/ios/www/css/style.css
new file mode 100644
index 00000000..f24d2b24
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/css/style.css
@@ -0,0 +1,4087 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-Light.ttf') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+body {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    align-content: center;
+    overflow-x: hidden;
+    min-height: 100vh;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+}
+
+#heading-href {
+    text-decoration: none;
+}
+
+.cast-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.cast-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 115px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.cast-image {
+    width: 100%;
+    height: 155px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.cast-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.cast-details {
+    width: 100%;
+}
+
+.actor-name, .actor-role {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+    white-space: normal;
+    text-align: center;
+}
+
+.actor-role {
+    font-style: italic;
+}
+
+.last-episode {
+    flex-direction: column;
+    align-items: center;
+    display: inline-block;
+}
+
+.last-episode strong {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.last-episode-image-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.last-episode-image {
+    max-width: 220px;
+    height: auto;
+    border-radius: 5px;
+}
+
+.last-episode-image:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.director-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.director-list {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.director-link {
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+
+.director-link .cast-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.director-link .cast-image {
+    width: 100%;
+    height: 155px;
+    margin-bottom: 5px;
+}
+
+.director-link .actor-name {
+    font-size: 12px;
+}
+
+.creators-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.creator-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 115px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.creator-image {
+    width: 100%;
+    height: 155px;
+    object-fit: cover !important;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.creator-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.creator-details {
+    width: 100%;
+}
+
+.creator-name {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+}
+
+#movie-match-btn {
+    position: fixed;
+    bottom: 220px;
+    right: 20px;
+    background-color: #7378c5;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#user-name {
+    font: inherit;
+    border-radius: 8px;
+}
+
+#user-comment {
+    font: inherit;
+    border-radius: 8px;
+}
+
+#submit-comment {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+}
+
+#submit-comment:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.comments-controls {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+}
+
+button:disabled {
+    cursor: not-allowed;
+}
+
+.comments-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+}
+
+#cast-info {
+    color: white;
+    text-decoration: underline;
+}
+
+#cast-info:hover {
+    color: #ff8623;
+}
+
+#similar-tv {
+    color: white;
+    text-decoration: underline;
+}
+
+#similar-tv:hover {
+    color: #ff8623;
+}
+
+#director-link {
+    color: white;
+    text-decoration: underline;
+}
+
+#director-link:hover {
+    color: #ff8623;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    margin-top: 5px;
+}
+
+#toggle-filters-btn {
+    margin: 10px;
+    background-color: #7378c5;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s ease;
+    padding: 10px 20px;
+    font: inherit;
+}
+
+#toggle-filters-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease;
+}
+
+#movie-tv-filters, #people-filters, #tv-filters {
+    max-width: 500px;
+    margin: 4px auto;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border: 2px solid #7378c5;
+    min-width: 290px;
+}
+
+#movie-tv-filters label, #movie-tv-filters select, #movie-tv-filters input[type="number"], #movie-tv-filters input[type="range"],
+#people-filters label, #people-filters select, #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters label, #tv-filters select, #tv-filters input[type="range"], #tv-filters input[type="number"] {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+    font-family: "Poppins", sans-serif;
+    color: #fff;
+}
+
+#movie-tv-filters label, #people-filters label, #tv-filters label {
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+#movie-tv-filters select, #people-filters select, #tv-filters select {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-tv-filters select:hover, #people-filters select:hover, #tv-filters select:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#movie-tv-filters select:focus, #people-filters select:focus, #tv-filters select:focus {
+    background-color: #7378c5;
+}
+
+#movie-tv-filters select:focus option:hover, #people-filters select:focus option:hover, #tv-filters select:focus option:hover {
+    background-color: #ff8623;
+}
+
+#movie-tv-filters input[type="number"], #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters input[type="range"], #tv-filters input[type="number"] {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-tv-filters input[type="number"]:hover, #people-filters input[type="range"]:hover, #people-filters input[type="number"]:hover, #tv-filters input[type="range"]:hover, #tv-filters input[type="number"]:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#reset-filters {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 25px;
+    border: none;
+    cursor: pointer;
+    color: white;
+    padding: 10px 15px;
+    margin-top: 30px;
+    display: block;
+    width: 100%;
+}
+
+#reset-filters:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#rating-filter {
+    vertical-align: top;
+}
+
+#movie-tv-filters span, #people-filters span {
+    font-weight: bold;
+    margin-left: 10px;
+}
+
+input[type=range] {
+    cursor: pointer;
+}
+
+#rating-value {
+    font: inherit;
+}
+
+.modal-header h3 {
+    flex-grow: 1;
+    text-align: center;
+    margin: 0;
+}
+
+.close {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+}
+
+#year-filter::placeholder {
+    color: white;
+}
+
+#year-tv-filter::placeholder {
+    color: white;
+}
+
+#toggle-comment-modal, #prev-page, #next-page {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    color: white;
+}
+
+#toggle-comment-modal:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#prev-page:disabled, #next-page:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+#prev-page:disabled, #next-page:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+#prev-page:hover, #next-page:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#comments-section h3 {
+    text-align: center;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    border-radius: 10px;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+p {
+    text-align: center;
+    color: #a6967e;
+}
+
+.button2 {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    right: 18px;
+    position: absolute;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+}
+
+html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
+
+.main2 {
+    text-align: center;
+    color: orange;
+    scroll-behavior: smooth;
+}
+
+.main2 p {
+    color: orange;
+}
+
+header {
+    background-color: transparent;
+    display: flex;
+    justify-content: flex-end;
+    padding: 1.5rem;
+}
+
+.search {
+    background-color: transparent;
+    border: 2px solid #121280;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    width: 250px;
+}
+
+#main {
+    align-self: center;
+    margin-left: 45px;
+}
+
+.search::placeholder {
+    color: #7378c5;
+}
+
+#search:hover {
+    outline: none;
+    background-color: #22254b;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 100px;
+    padding-top: -20px;
+}
+
+header h1 {
+    color: #ff8623;
+    text-align: center;
+}
+
+#privacy-header {
+    color: #ff8623;
+    text-align: center;
+}
+
+.highlight {
+    color: orange;
+}
+
+.highlight:hover {
+    color: #ff8623;
+}
+
+.highlight2 {
+    color: orange;
+}
+
+.highlight2:hover {
+    color: #ff8623;
+}
+
+.search:focus {
+    outline: none;
+    background-color: #22254b;
+}
+
+.about {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 130px;
+    border-radius: 8px;
+    z-index: 999;
+}
+
+.header2 {
+    text-align: center;
+    align-self: center;
+    margin-left: 500px;
+}
+
+.back-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 41px;
+    border-radius: 8px;
+    z-index: 999;
+}
+
+.movie-card {
+    display: flex;
+    background: #fff;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.movie-image {
+    width: 150px;
+    height: 225px;
+    background-size: cover;
+    background-position: center;
+}
+
+.tvSeries-info {
+    padding: 20px;
+    flex-grow: 1;
+}
+
+.green {
+    color: #4CAF50;
+}
+
+.orange {
+    color: #FF9800;
+}
+
+.red {
+    color: #ff0000;
+}
+
+#profileBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    width: 100px;
+    top: 0;
+    margin-left: 316px;
+    border-radius: 8px;
+}
+
+#profileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#mobileGoogleSignInBtn {
+    display: none;
+}
+
+#mobileProfileBtn {
+    display: none;
+}
+
+@media screen and (max-width: 900px) {
+    #mobileGoogleSignInBtn {
+        display: block;
+    }
+
+    #mobileProfileBtn {
+        display: block;
+    }
+}
+
+.back-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.movie {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+    height: 555px;
+}
+
+.tvSeries {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+    height: 555px;
+}
+
+.movie img, .tvSeries img {
+    height: 435px;
+    width: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.movie .overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+    text-align: center;
+}
+
+.tvSeries .overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.tvSeries-info h3 {
+    margin: 0;
+}
+
+.tvSeries:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.tvSeries-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.tvSeries-info span.green {
+    color: rgb(39,189,39);
+}
+
+.movie-info span.green {
+    color: rgb(39,189,39);
+}
+
+.tvSeries-info span.orange {
+    color: orange;
+}
+
+.movie-info span.orange {
+    color: orange;
+}
+
+.tvSeries-info span.red {
+    color: rgb(189,42,42);
+}
+
+.movie-info span.red {
+    color: rgb(189,42,42);
+}
+
+.overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.movie:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.overview h4 {
+    margin-top: 0;
+}
+
+.genres {
+    align-self: center;
+    margin-left: 15px;
+    color: #ff8623;
+}
+
+#other1:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.circle-text {
+    font-size: 25px;
+    font-weight: bold;
+    dominant-baseline: middle;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.about:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+#my-heading1 {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards 0.5s;
+}
+
+#trivia-btn {
+    position: fixed;
+    bottom: 60px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#trivia-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.button2:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#discussions-btn {
+    position: fixed;
+    bottom: 100px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#discussions-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-of-the-day-btn {
+    position: fixed;
+    bottom: 140px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#loadMoreButton {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    color: white;
+    margin-top: 20px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#loadMoreButton:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-of-the-day-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-of-the-day-btn2 {
+    position: fixed;
+    bottom: 80px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-of-the-day-btn2:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#button-search {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#button-search:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.details-container {
+    display: flex;
+    height: calc(100% - 60px);
+    color: white;
+    overflow-y: auto;
+    align-items: start;
+}
+
+.movie-left, .movie-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.actor-left, .actor-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 20px;
+}
+
+.director-left, .director-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 20px;
+}
+
+#actor-name {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    margin-top: -10px;
+}
+
+.movie-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.movie-left img {
+    height: auto;
+}
+
+.actor-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.director-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.movie-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    height: 100%;
+}
+
+.actor-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-top: 70px;
+}
+
+.director-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-top: 40px;
+}
+
+.movie-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+    margin-right: 5px;
+}
+
+.movie-link:hover {
+    color: #ff8623;
+}
+
+.movie-image {
+    width: 100%;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+@media (max-width: 768px) {
+    .movie-image {
+        height: auto;
+    }
+    #actor-image {
+        height: auto;
+    }
+}
+
+.movie-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.actor-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#rating {
+    color: inherit;
+}
+
+#rating:hover {
+    color: #ff8623;
+}
+
+#metacritics {
+    color: inherit;
+}
+
+#metacritics:hover {
+    color: #ff8623;
+}
+
+.director-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.adult-indicator {
+    color: red;
+    font-weight: bold;
+}
+
+.general-indicator {
+    color: green;
+    font-weight: bold;
+}
+
+.movie-description {
+    font-size: 1rem;
+    color: white;
+    width: 100%;
+}
+
+.companies-section {
+    margin-top: 20px;
+}
+
+.companies-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.company-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+@media (max-width: 768px) {
+    .company-item {
+        max-width: 125px;
+    }
+}
+
+.company-logo {
+    max-width: 100px;
+    max-height: 75px;
+    height: auto;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.company-item:hover {
+    transform: scale(1.07);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.company-details {
+    width: 100%;
+}
+
+.company-name {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+    white-space: normal;
+    text-align: center;
+}
+
+.actor-description {
+    font-size: 1rem;
+    color: white;
+    transform: translateY(10%);
+}
+
+.director-description {
+    font-size: 1rem;
+    color: white;
+    transform: translateY(10%);
+}
+
+.streaming-logo {
+    display: inline-flex;
+    align-items: flex-end;
+    vertical-align: bottom;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.streaming-logo img {
+    width: 50px;
+    margin-left: 10px;
+    transition: transform 0.3s ease;
+}
+
+.streaming-logo:hover {
+    transform: scale(1.1);
+    cursor: pointer;
+}
+
+.movie-rating {
+    margin-top: 100px;
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#user-ratings {
+    color: inherit;
+}
+
+#user-ratings:hover {
+    color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+#userRatings {
+    color: inherit;
+}
+
+#userRatings:hover {
+    color: #ff8623;
+}
+
+#githubLink {
+    color: white !important;
+}
+
+#githubLink1 {
+    color: black !important;
+}
+
+#githubLink1:hover {
+    color: #ff8623 !important;
+    transition: 0.1s ease-in;
+}
+
+#githubLink2 {
+    color: white !important;
+}
+
+#githubLink2: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;
+}
+
+.modal-overlay {
+    display: none;
+    position: fixed;
+    z-index: 100000000002;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-visible {
+    display: flex !important;
+}
+
+.pin-btn {
+    color: #ff8623;
+}
+
+.pin-btn:hover {
+    color: #c45c00;
+}
+
+.pin-btn.pinned {
+    color: #7378c5;
+}
+
+.spinner {
+    border: 4px solid #000;
+    border-radius: 50%;
+    border-top: 5px solid #ff8623;
+    width: 100px;
+    height: 100px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+#githubLink:hover {
+    color: #ff8623 !important;
+    transition: 0.1s ease-in;
+}
+
+#imdbRating, #rtRating {
+    text-decoration: none;
+    color: inherit;
+    font-size: 2.5rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#imdbRating:hover {
+    color: #ff8623;
+}
+
+#rtRating:hover {
+    color: #ff8623;
+}
+
+#movie-rating h2:hover {
+    color: initial;
+}
+
+h2 {
+    font-size: 1.74rem;
+}
+
+h2:hover {
+    color: orange;
+    transition: 0.1s linear;
+}
+
+p {
+    color: white;
+}
+
+.similar-movies-container h3 {
+    color: #E0E0E0;
+}
+
+.similar-movies span:hover {
+    text-decoration: none;
+    opacity: 0.8;
+    color: #ff8623;
+}
+
+.movie-details-body {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: repeat;
+}
+
+.movie-details-body2 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-position: center;
+    height: 100vh;
+    background-size: auto;
+    background-repeat: repeat;
+}
+
+.movie-details-body3 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+
+.movie-details-body4 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+
+.favorites-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 219px;
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+    z-index: 999;
+    max-width: 95px;
+}
+
+#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;
+}
+
+#searchContainer {
+    position: relative;
+    display: inline-block;
+}
+
+#averageDisplays {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+    width: 100%;
+}
+
+.progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    flex: 1;
+    text-align: center;
+}
+
+.progress-ring {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.progress-ring__circle {
+    fill: transparent;
+    stroke-width: 10;
+    stroke: #fff;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+}
+
+.progress-ring__progress {
+    fill: transparent;
+    stroke-width: 10;
+    stroke: var(--progress-color);
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    transition: stroke-dashoffset 0.6s ease-out;
+}
+
+.progress-ring__text {
+    font-size: 20px;
+    dominant-baseline: middle;
+    text-anchor: middle;
+    opacity: 0;
+    transition: opacity 0.6s ease-out;
+}
+
+strong {
+    font-weight: bold;
+}
+
+.favorites-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#favorite-btn {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: grey;
+    margin-left: 10px;
+    border-radius: 8px;
+    width: 40px;
+    box-shadow: none;
+    position: relative;
+    cursor: pointer;
+}
+
+#favorite-btn:hover {
+    background-color: #dcdcdc;
+}
+
+.tooltip-text {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 10%;
+    margin-left: -90px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.title-favorites-container {
+    display: flex;
+    align-items: center;
+    overflow: visible;
+}
+
+#favorite-btn.favorited {
+    color: red;
+}
+
+#favorites-main {
+    margin-left: 15px;
+}
+
+#favorite-btn:hover::after {
+    content: "Favorite / Unfavorite";
+    position: absolute;
+    top: -45px;
+    left: 50%;
+    width: 55px;
+    transform: translateX(-70%);
+    background-color: #232323;
+    color: white;
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 12px;
+    pointer-events: none;
+    z-index: 10;
+}
+
+#main2 {
+    text-align: center;
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+    margin-bottom: 300px;
+}
+
+#main2 h2, #main2 h3 {
+    color: #ff8623;
+    margin-bottom: 20px;
+}
+
+#aboutHeader {
+    margin-top: -25px;
+}
+
+#main2 p, #main2 ul, #main2 li {
+    text-align: left;
+    margin: auto;
+    max-width: 800px;
+    color: #ff8623;
+}
+
+#main2 ul {
+    list-style: none;
+    padding: 0;
+}
+
+#main2 li {
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: black;
+    align-items: center;
+}
+
+#main2 li:hover {
+    background-color: #e6e6e6;
+}
+
+#main2 a {
+    color: #7378c5;
+    text-decoration: none;
+}
+
+#main2 a:hover {
+    text-decoration: underline;
+}
+
+.app-link {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.app-link button {
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px 15px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: black;
+    cursor: pointer;
+    font-size: 16px;
+    display: block;
+    width: auto;
+    margin: 10px auto;
+}
+
+.app-btn {
+    background-color: #7378c5;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px 15px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: white;
+    cursor: pointer;
+    font: inherit;
+    display: block;
+    width: auto;
+    margin: 10px auto;
+    transition: 0.1s ease-in;
+}
+
+.clock {
+    text-align: center;
+    font-size: 20px;
+    color: #ff8623;
+}
+
+.clock:hover {
+    color: #ff8623;
+}
+
+#time-label {
+    color: #ff8623;
+}
+
+#time-label:hover {
+    color: #ff8623;
+}
+
+.app-btn:hover {
+    background-color: #ff8623;
+}
+
+.app-link button:hover {
+    background-color: #e6e6e6;
+}
+
+.app-link p {
+    margin-top: 10px;
+    color: white;
+}
+
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-container {
+    text-align: center;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#trailerButton {
+    color: #fff;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#trailerButton:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.trailer-button {
+    display: block;
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+    font-size: 1rem;
+}
+
+.trailer-button:hover {
+    background-color: #ff8623;
+}
+
+.cast-container {
+    margin-top: 20px;
+}
+
+.actor {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor:hover {
+    color: #0056b3;
+}
+
+.actor-item {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor-item:hover {
+    color: #0056b3;
+}
+
+.cast-container {
+    margin-top: 20px;
+}
+
+.actor-link {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor-link:hover {
+    color: #0056b3;
+}
+
+.cast-list {
+    white-space: nowrap;
+    overflow-x: auto;
+    margin-top: 10px;
+}
+
+.actor-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.watchlist-buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 60px;
+    margin-left: 30px;
+}
+
+.watchlist-buttons-container button {
+    margin: 0 10px;
+    background-color: #7378c5;
+    font: inherit;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.1s ease-in;
+}
+
+#button {
+    margin: 0 10px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.1s ease-in;
+}
+
+#button:hover {
+    background-color: #ff8623;
+}
+
+.watchlist-buttons-container button:hover {
+    background-color: #ff8623;
+}
+
+#search-container {
+    display: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 8px;
+    color: white;
+    margin: 10px;
+}
+
+#movie-match-container1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0;
+    padding: 0;
+    top: 0;
+    margin: 0;
+}
+
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.checkbox-container label {
+    margin-top: 6px;
+}
+
+.active-category {
+    background-color: #ff8623;
+    color: white;
+}
+
+.nav-button {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.nav-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#menu-btn {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+    font-size: 14px;
+    z-index: 1000000002 !important;
+}
+
+#menu-btn i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+#menu-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#settings-container {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 32px;
+    color: white;
+    margin: 5px auto;
+    max-width: 500px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+@media (max-width: 700px) {
+    #settings-container {
+        max-width: calc(100% - 10px);
+        margin: 10px 10px;
+    }
+}
+
+#chat-button,
+#settings-btn,
+#movie-of-the-day-btn,
+#movie-match-btn,
+#movie-match-btn3,
+#movie-timeline-btn,
+#discussions-btn,
+#trivia-btn,
+#back-to-top-btn {
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    transform: translateY(20px);
+    opacity: 0;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #movie-match-btn3,
+    #trivia-btn,
+    #back-to-top-btn {
+        position: fixed;
+        right: 10px;
+        z-index: 1000;
+    }
+
+    #menu-btn {
+        display: block;
+    }
+}
+
+.mobile-bottom-bar {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: auto;
+    background-color: #7378c5;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+    justify-content: space-around;
+    align-items: center;
+    z-index: 100000222;
+    transition: transform 0.09s ease-in-out;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+}
+
+.hide-bar {
+    transform: translateY(100%);
+}
+
+.mobile-bottom-bar a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    text-align: center;
+    color: white;
+    text-decoration: none;
+    padding: 6px 0;
+    width: 15%;
+}
+
+.mobile-bottom-bar a:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.mobile-bottom-bar i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+.mobile-bottom-bar span {
+    display: block;
+    font-size: 10px;
+    color: #ecf0f1;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #trivia-btn,
+    #menu-btn,
+    #back-to-top-btn {
+        display: none;
+    }
+}
+
+.nav-button:disabled {
+    background-color: #b5b5b5;
+    cursor: not-allowed;
+}
+
+.search-users-container {
+    text-align: center;
+    margin: 20px auto;
+    background-color: rgba(55, 59, 105, 0.8);
+    padding: 15px;
+    border-radius: 8px;
+    max-width: 500px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    color: white;
+    font: inherit;
+}
+
+.search-users-container input[type="text"] {
+    width: 70%;
+    padding: 10px;
+    margin-right: 10px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    font: inherit;
+}
+
+.search-users-container button {
+    padding: 10px 20px;
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font: inherit;
+}
+
+.search-users-container button:hover {
+    background-color: #ff8623;
+}
+
+.search-results-container {
+    display: none;
+    background-color: rgba(211, 211, 211, 0.5);
+    max-width: 500px;
+    margin: 10px auto;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    text-align: left;
+}
+
+#viewMyProfileBtn {
+    display: block;
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 20px;
+    margin: 20px auto;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font: inherit;
+}
+
+#viewMyProfileBtn:hover {
+    background-color: #ff8623;
+}
+
+.user-search-result {
+    background-color: rgba(55, 59, 105, 0.8);
+    margin: 10px auto;
+    padding: 10px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    color: white;
+    transition: background-color 0.3s ease;
+    height: 100px;
+    max-width: 400px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.user-search-result:hover {
+    background-color: #ff8623;
+}
+
+.user-search-result img {
+    width: auto;
+    height: 95%;
+    max-height: 100px;
+    margin-right: 10px;
+    border-radius: 8px;
+    object-fit: contain;
+}
+
+#userLink {
+    color: black;
+}
+
+#userLink:hover {
+    color: #ff710d;
+}
+
+#chat-button {
+    background-color: #7378c5;
+    bottom: 325px;
+    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);
+}
+
+#chat-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+.user-search-result div {
+    width: 67%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: left;
+}
+
+.user-search-result strong {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.user-search-result p {
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.pagination {
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    padding: 10px;
+    margin: 10px;
+    text-align: center;
+}
+
+@media (max-width: 767px) {
+    .genres + main + .pagination {
+        text-align: center;
+    }
+
+    .pagination {
+        position: relative;
+        width: calc(100% - 20px);
+        margin-top: 20px;
+    }
+}
+
+.page-button {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    margin: 2px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    font: inherit;
+    font-size: 12.9px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.page-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.page-button.active {
+    background-color: #4a4e8c;
+}
+
+.page-button:disabled {
+    background-color: #b5b5b5;
+    cursor: default;
+}
+
+#search-results-label {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#search-results-label:hover {
+    color: #ff8623;
+}
+
+.category-buttons button {
+    background-color: #7378c5;
+    font: inherit;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    margin: 10px;
+    transition: 0.1s ease-in;
+}
+
+.category-buttons button:hover {
+    background-color: #534caf;
+}
+
+.watchlist {
+    background-color: rgba(255, 255, 255, 0.1);
+    margin: 10px;
+    padding: 15px;
+    border-radius: 8px;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+
+.watchlist-title {
+    font-size: 1.5rem;
+    color: #ff8623;
+    text-align: center;
+}
+
+.watchlist-description {
+    font-size: 1rem;
+    margin-bottom: 10px;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+    background-color: #373b69;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 50%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+}
+
+.modal-content h2 {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.modal-content label {
+    color: #fff;
+    margin-bottom: 10px;
+    display: block;
+}
+
+.modal-content input[type="text"],
+.modal-content textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #7378c5;
+    background-color: #22254b;
+    color: #fff;
+}
+
+.modal-content button {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font: inherit;
+    display: block;
+    margin: 10px auto;
+    transition: background-color 0.3s ease;
+}
+
+.modal-content select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #7378c5;
+    background-color: #22254b;
+    color: #fff;
+}
+
+.modal-content button:hover {
+    background-color: #ff8623;
+}
+
+.modal-content {
+    position: relative;
+    background-color: #373b69;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 50%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+}
+
+.modal-content h2 {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.modal-content .close-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: #fff;
+    cursor: pointer;
+}
+
+.modal-content label {
+    color: #fff;
+    margin-bottom: 10px;
+    display: block;
+}
+
+#subheading:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#aboutHeader:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#profileLink {
+    color: white !important;
+    text-decoration: underline !important;
+}
+
+#profileLink:hover {
+    color: #ff8623 !important;
+    transition: 0.1s linear;
+}
+
+textarea {
+    resize: none;
+}
+
+.close-button {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close-button:hover {
+    color: #ff8623;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: #ff8623;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.actor-link:hover {
+    color: #ff8623;
+}
+
+.genres {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#discussion-input {
+    background-color: transparent;
+    border: 2px solid #ff8623;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+}
+
+#discussion-input:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#post-btn {
+    background-color: #ff8623;
+    font: inherit;
+}
+
+#post-btn:hover {
+    background-color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+ol li:hover {
+    color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+#chatbotContainer {
+    width: 95%;
+    max-width: 600px;
+    background-color: rgba(0, 0, 0, 0.7);
+    margin: 20px auto;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#chatbotHeader {
+    background-color: #ff8623;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    border-radius: 8px;
+    margin-top: 10px;
+}
+
+#chatbotBody {
+    overflow-y: auto;
+    max-height: 300px;
+    padding: 10px;
+    border-radius: 8px;
+    color: white;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    margin-top: 10px;
+    border: 1px solid #ff8623;
+}
+
+#sendButton {
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    color: white;
+    background-color: #ff8623;
+    border: none;
+    cursor: pointer;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#sendButton:hover {
+    background-color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+#chatbotInput {
+    width: 100%;
+    padding: 10px 20px;
+    border: 1px solid #ff8623;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    background-color: transparent;
+    color: white;
+    margin-top: 10px;
+    box-sizing: border-box;
+}
+
+.highlight1 {
+    color: orange;
+}
+
+#chatbotInput:focus {
+    outline: none;
+}
+
+#bot-header {
+    text-align: center;
+    width: 100%;
+}
+
+#chatbotBody > div {
+    margin-bottom: 10px;
+    padding: 5px 10px;
+    border-radius: 5px;
+}
+
+@media (max-width: 705px) {
+    #search-title,
+    #alt-title {
+        display: none;
+    }
+}
+
+@media (max-height: 930px) {
+    #search-title,
+    #alt-title {
+        display: none;
+    }
+}
+
+#chatbotBody > div[text-align="right"] {
+    background-color: #ff8623;
+    align-self: flex-end;
+}
+
+#chatbotBody > div[text-align="left"] {
+    background-color: #7378c5;
+    align-self: flex-start;
+}
+
+@media (max-width: 767px) {
+    #chatbotContainer {
+        top: 56.1%
+    }
+}
+
+#change-director-btn {
+    padding: 5px 10px;
+    cursor: pointer;
+    border: none;
+    background-color: #7378c5;
+    font: inherit;
+    color: #000000;
+    border-radius: 8px;
+}
+
+#movie-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#movie-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#actor-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#actor-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#director-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#director-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#company-logo {
+    z-index: 100000000;
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#rating-link {
+    color: white;
+}
+
+#rating-link:hover {
+    color: #ff8623;
+}
+
+#company-logo:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#change-director-btn:hover {
+    background-color: #ff8623;
+}
+
+#trailerContainer {
+    width: 560px;
+    height: 315px;
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+}
+
+#removeBtn {
+    color: white;
+}
+
+#removeBtn:hover {
+    color: #ff8623;
+}
+
+.director-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.director-link:hover {
+    color: #ff8623;
+}
+
+@media (max-width: 982px) {
+    #local-time {
+        display: none;
+    }
+}
+
+#custom-bg-upload {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid #7378c5;
+    background-color: #22254b;
+    color: white;
+    font-size: 16px;
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+#movie-details-container {
+    margin-top: 10px;
+}
+
+#custom-bg-name {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid #7378c5;
+    background-color: #22254b;
+    color: white;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+#upload-bg-btn {
+    background-color: #ff8623;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    font-size: 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 20px auto;
+    display: block;
+}
+
+.chart-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 20px;
+    justify-content: center;
+}
+
+.chart-box {
+    background-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+    width: 100%;
+    max-width: 600px;
+    height: 400px;
+    margin: 20px auto;
+    opacity: 1;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 900px) {
+    .chart-container {
+        flex-direction: column;
+    }
+
+    .chart-box {
+        height: auto;
+    }
+}
+
+#ratingImdb {
+    color: #ff710d;
+    font-size: 17px;
+}
+
+#ratingImdb:hover {
+    color: #ff8623;
+}
+
+.chart-title {
+    text-align: center;
+    color: #ff710d;
+    margin-bottom: 15px;
+}
+
+#descriptionP {
+    margin-top: -10px;
+}
+
+#upload-bg-btn:hover {
+    background-color: #7378c5;
+    transition: background-color 0.3s ease;
+}
+
+#settings-btn {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#settings-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+@media (max-width: 1000px) {
+    #comments-section {
+        margin-bottom: 210px;
+    }
+}
+
+#local-time {
+    transform: translateX(10%);
+    padding: 10px;
+    border-radius: 10px;
+    z-index: 10;
+}
+
+#mobileProfileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+@media (max-width: 800px) {
+    #my-heading {
+        margin-left: 0;
+    }
+
+    #movie-details-body3 {
+        background-image: url("https://movie-verse.com/images/universe-1.webp");
+        background-position: center;
+        height: 100vh;
+        background-size: auto;
+        background-repeat: repeat;
+        width: 100vw;
+    }
+
+    #profileBtn {
+        display: none;
+    }
+
+    #indexLink {
+        margin-bottom: -15px;
+    }
+
+    .back-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: -180px;
+        border-radius: 8px;
+    }
+
+    .about {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 0;
+        border-radius: 8px;
+    }
+
+    .favorites-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        width: 95px;
+        margin-left: 188px;
+        border-radius: 8px;
+        padding-left: 10px;
+        padding-right: 10px;
+        box-sizing: border-box;
+    }
+
+    #googleSignInBtn {
+        display: none;
+    }
+
+    .movie-details-body {
+        min-height: 100% !important;
+    }
+
+    .movie-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .actor-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .director-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .details-container {
+        flex-direction: column;
+    }
+
+    #movie-details-container {
+        margin-top: 15px;
+    }
+
+    .movie-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .actor-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .director-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .movie-left, .movie-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .actor-left, .actor-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .director-left, .director-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .movie-right {
+        margin-top: 0;
+        height: 100% !important;
+        overflow: visible;
+        margin-bottom: 5px;
+    }
+
+    #descriptionP {
+        margin-top: -100px;
+    }
+
+    .actor-right {
+        margin-top: -20px;
+        height: 100% !important;
+        overflow: visible;
+    }
+
+    .director-right {
+        margin-top: -20px;
+        height: 100% !important;
+        overflow: visible;
+    }
+
+    header {
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    main {
+        margin-bottom: -40px;
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #clear-search-btn {
+        margin-top: 5px;
+    }
+
+    .watchlist-buttons-container {
+        margin-left: -3px;
+    }
+
+}
+
+.year-input-container {
+    margin: 20px;
+}
+
+.year-input {
+    width: 150px;
+    padding: 10px;
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+}
+
+#load-movies {
+    padding: 10px 10px;
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#load-movies:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.movie-card {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+}
+
+#form {
+    margin-top: 20px;
+}
+
+#form1 {
+    margin-top: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.movie-card img {
+    width: 100%;
+}
+
+.movie-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+    padding-top: 14px;
+    flex-grow: 1;
+}
+
+.tvSeries-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+}
+
+.movie-info h3 {
+    margin: 0;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.timeline-container {
+    margin: 20px auto;
+    background-color: rgba(255,255,255,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    width: calc(100% - 24px);
+    border-radius: 16px;
+    margin-top: 50px;
+    text-align: center;
+}
+
+#movie-timeline-btn {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    cursor: pointer;
+}
+
+#movie-timeline-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movies-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+    flex-direction: column;
+}
+
+#tvseries-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+    flex-direction: column;
+}
+
+#tvseries-container .movie-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+#movies-container1 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+#movies-container .movie-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.movies-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.center-container {
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+.center-container1 {
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+#load-movies {
+    cursor: pointer;
+    font: inherit;
+}
+
+#select-text {
+    margin-top: 30px;
+    color: #ff8623;
+}
+
+#select-text:hover {
+    color: #ff8623;
+}
+
+#clear-search-btn {
+    background-color: #7378c5;
+    color: black;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 10px;
+    font: inherit;
+    margin-right: 20px;
+}
+
+#clear-search-btn:hover {
+    background-color: #ff8623;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+    body {
+        background-size: auto;
+        background-repeat: repeat;
+    }
+}
+
+#search-title {
+    color: #ff8623;
+    text-align: center;
+    font-size: 1.74rem;
+    margin-bottom: 20px;
+}
+
+#search-title:hover {
+    color: #ff8623;
+}
+
+#search-title1 {
+    color: #ff8623;
+    text-align: center;
+    font-size: 1.74rem;
+    margin-bottom: 20px;
+}
+
+#search-title1:hover {
+    color: #ff8623;
+}
+
+#movie-match-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    margin-top: 60px;
+    padding: 20px;
+    width: 100%;
+    margin-bottom: 300px;
+}
+
+.profile-container {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.profile-image-container img {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.profile-info p {
+    margin: 10px 0;
+}
+
+body {
+    overflow-x: hidden;
+    max-width: 100%;
+}
+
+#googleSignInBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 420px;
+    border-radius: 8px;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+.mobile-sign-in-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 12px;
+    margin-bottom: 10px;
+}
+
+#mobileGoogleSignInBtn {
+    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;
+}
+
+#mobileProfileBtn {
+    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;
+}
+
+#mobileGoogleSignInBtn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+.movie-match-container {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#movie-match-form {
+    background-color: transparent;
+    border: 2px solid #7378c5;
+    border-radius: 50px;
+    padding: 20px;
+    max-width: 500px;
+    margin: auto;
+}
+
+#movie-match-form label, #movie-match-form select, #movie-match-form input[type="submit"] {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+    font-family: "Poppins", sans-serif;
+    color: #fff;
+}
+
+#movie-match-form label {
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+#movie-match-form select {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-match-form input[type="submit"] {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 25px;
+    border: none;
+    cursor: pointer;
+    color: white;
+    padding: 10px 15px;
+    margin-top: 30px;
+}
+
+#movie-match-form input[type="submit"]:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#movie-match-btn2 {
+    position: fixed;
+    bottom: 115px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn2:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-match-btn3 {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn3:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-match-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.company-left, .company-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-align: center;
+}
+
+.company-left {
+    width: 33.33%;
+}
+
+.company-right {
+    width: 66.67%;
+}
+
+#company-movies-list {
+    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 10px;
+}
+
+#company-movies-list span {
+    margin: 0;
+}
+
+.company-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.company-link:hover {
+    color: #ff8623;
+}
+
+.title-logo-container {
+    text-align: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.company-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.company-description {
+    margin-top: 20px;
+}
+
+.company-description, #company-headquarters, #company-country, #company-website {
+    color: white;
+    margin-bottom: 10px;
+}
+
+#company-website:hover {
+    color: #ff8623;
+}
+
+.movies-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.movies-list a {
+    color: white;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.movies-list a:hover {
+    color: purple;
+}
+
+@media (max-width: 800px) {
+    .company-details-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .company-left {
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .company-right {
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .company-left img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+#button-clear {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 15px;
+    font: inherit;
+    cursor: pointer;
+    margin-left: 10px;
+    color: #000000;
+    margin-right: 40px;
+}
+
+#rating-value:hover {
+    color: #ff8623;
+}
+
+#button-clear:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.rating {
+    display: flex;
+    justify-content: flex-end;
+    direction: rtl;
+    color: grey;
+    font-size: 20px;
+}
+
+.rating .star {
+    color: white;
+    cursor: pointer;
+    transition: color 200ms;
+}
+
+.rating .star:hover,
+.rating .star:hover ~ .star {
+    color: gold;
+}
+
+@keyframes shake {
+    0% { transform: translateX(0); }
+    20% { transform: translateX(-5px); }
+    40% { transform: translateX(5px); }
+    60% { transform: translateX(-5px); }
+    80% { transform: translateX(5px); }
+    100% { transform: translateX(0); }
+}
+
+.shake-animation {
+    animation: shake 0.5s ease-in-out 5;
+}
+
+.search-results {
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+#form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+}
+
+#search-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.search-result-card {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #7378c5;
+    margin-bottom: 2px;
+    margin-top: 5px;
+    width: 300px;
+    color: #212121;
+}
+
+.search-result-card:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.buttons-container button {
+    padding-left: 20px;
+}
+
+#clear-search {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    padding: 5px 10px;
+    margin-top: 10px;
+    margin-left: 20px;
+}
+
+#clear-search:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#view-all-results {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    margin-top: 10px;
+}
+
+#view-all-results:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.result-image {
+    width: 64px;
+    height: 96px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.result-details {
+    margin-left: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+.result-name {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.result-type {
+    font-size: 14px;
+    font-style: italic;
+    color: #212121;
+}
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+    color: white;
+    transition: 0.3s ease-in;
+}
+
+#footer:hover {
+    cursor: pointer;
+}
+
+.notification-btn {
+    position: fixed;
+    top: 5px;
+    right: 20px;
+    z-index: 100;
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    cursor: pointer;
+    padding: 9px;
+    border-radius: 8px;
+    transition: 0.1s ease-in;
+}
+
+#closeModalButton {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    text-align: center;
+    transition: 0.1s ease-in;
+}
+
+#closeModalButton:hover {
+    background-color: #ff8623;
+}
+
+#closeModalButton {
+    margin: 10px auto;
+    display: block;
+}
+
+.notification-btn:hover {
+    background-color: #ff8623;
+}
+
+.notification-modal {
+    position: fixed;
+    top: 50px;
+    right: 20px;
+    background-color: #7378c5;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    padding: 20px;
+    width: 300px;
+    z-index: 1002;
+    color: white;
+}
+
+@media (max-width: 900px) {
+    .notification-modal {
+        right: 12.5px;
+    }
+
+    .notification-btn {
+        right: 12.5px;
+    }
+}
+
+.notification-link:hover {
+    color: #ff8623 !important;
+}
+
+.notification-modal h4 {
+    margin: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.notification-modal ul {
+    list-style: none;
+    padding: 0;
+    margin-top: 10px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.notification-modal ul li {
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+}
+
+#comments-section {
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px 0;
+    max-width: calc(100% - 20px);
+}
+
+@keyframes dropIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: dropIn 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1s;
+}
+
+#local-time {
+    cursor: pointer;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1.5s;
+}
+
+#local-time p,
+#local-time div {
+    opacity: 0;
+    animation: dropIn 1s ease forwards 2s;
+}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/trivia.css b/MovieVerse-Mobile/platforms/ios/www/css/trivia.css
new file mode 100644
index 00000000..6a40c7c3
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/css/trivia.css
@@ -0,0 +1,1157 @@
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+}
+
+#footerP {
+    color: white !important;
+}
+
+#footerP:hover {
+    transition: 0.1s ease-in;
+    color: #ff8623 !important;
+}
+
+@media (max-width: 900px) {
+    #local-time {
+        display: none;
+    }
+}
+
+body {
+    color: #ff903a;
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    align-content: center;
+    text-align: center;
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
+
+#profileBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    width: 100px;
+    top: 0;
+    margin-left: 316px;
+    border-radius: 8px;
+}
+
+#profileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-results {
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    margin: 0 auto;
+    align-items: center;
+}
+
+#form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+}
+
+.search-result-card {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #7378c5;
+    margin: 0;
+    margin-bottom: 2px;
+    margin-top: 5px;
+    width: 300px;
+    color: #212121;
+}
+
+.search-result-card:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.buttons-container button {
+    padding-left: 20px;
+}
+
+#clear-search {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    padding: 5px 10px;
+    margin-top: 10px;
+    margin-left: 20px;
+}
+
+#clear-search:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#view-all-results {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    margin-top: 10px;
+}
+
+#view-all-results:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.result-image {
+    width: 64px;
+    height: 96px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.result-details {
+    margin-left: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+.result-name {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.result-type {
+    font-size: 14px;
+    font-style: italic;
+    color: #212121;
+}
+
+#googleSignInBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 420px;
+    border-radius: 8px;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+#googleSignInBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+}
+
+#submit {
+    background-color: #7378c5;
+    font: inherit;
+    margin-bottom: 39px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#submit:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+#regenerate-questions {
+    background-color: #7378c5;
+    font: inherit;
+    margin-bottom: 39px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#regenerate-questions:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-timeline-btn {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-timeline-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-of-the-day-btn {
+    position: fixed;
+    bottom: 140px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-of-the-day-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#discussions-btn {
+    position: fixed;
+    bottom: 100px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#discussions-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+p {
+    text-align: center;
+    color: #ff8623;
+}
+
+.highlight:hover {
+    color: #ff8623;
+}
+
+.button2 {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    right: 18px;
+    position: absolute;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+.main2 {
+    text-align: center;
+    color: orange;
+    scroll-behavior: smooth;
+}
+
+.main2 p {
+    color: orange;
+}
+
+header {
+    background-color: transparent;
+    display: flex;
+    justify-content: flex-end;
+    padding: 1.5rem;
+}
+
+.search {
+    background-color: transparent;
+    border: 2px solid #121280;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    width: 400px;
+}
+
+#main {
+    align-self: center;
+}
+
+.search::placeholder {
+    color: #7378c5;
+}
+
+#search:hover {
+    outline: none;
+    background-color: #22254b;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 100px;
+    padding-top: -20px;
+}
+
+header h1 {
+    color: #ff8623;
+    text-align: center;
+}
+
+.highlight {
+    color: orange;
+}
+
+.search:focus {
+    outline: none;
+    background-color: #22254b;
+}
+
+.about {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 130px;
+    border-radius: 8px;
+}
+
+.header2 {
+    text-align: center;
+    align-self: center;
+    margin-left: 500px;
+}
+
+.back-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 41px;
+    border-radius: 8px;
+}
+
+.back-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.movie {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+}
+
+.movie img {
+    width: 100%;
+}
+
+.movie-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+}
+
+.movie-info h3 {
+    margin: 0;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.movie-info span.green {
+    color: rgb(39,189,39);
+}
+
+.movie-info span.orange {
+    color: orange;
+}
+
+.movie-info span.red {
+    color: rgb(189,42,42);
+}
+
+.overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.movie:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.overview h4 {
+    margin-top: 0;
+}
+
+.genres {
+    align-self: center;
+    margin-left: 15px;
+    color: #ff8623;
+}
+
+#other1:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#movie-match-btn3 {
+    position: fixed;
+    bottom: 220px;
+    right: 20px;
+    background-color: #7378c5;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+}
+
+#movie-match-btn3:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.about:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    background-color: #7378c5;
+    margin: 15% auto;
+    padding: 20px;
+    width: 80%;
+    max-width: 450px;
+    text-align: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    border-radius: 8px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+}
+
+.modal-content {
+    text-align: center;
+}
+
+.close-button {
+    cursor: pointer;
+    position: relative;
+    top: -2px;
+    font-size: 25px;
+    color: #aaa;
+    font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: red;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.progress-circle {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background: conic-gradient(green 0%, green var(--progress, 0%), red var(--progress, 0%), red 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 20px auto;
+    transition: stroke-dashoffset 0.5s ease-out;
+}
+
+.progress-circle::after {
+    content: '';
+    width: 130px;
+    height: 130px;
+    background: white;
+    border-radius: 50%;
+    display: block;
+}
+
+#correct-answers {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+#result-text {
+    text-align: center;
+    font-size: 20px;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+.favorites-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 219px;
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+}
+
+.favorites-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#favorite-btn {
+    background: transparent;
+    color: grey;
+    margin-left: 10px;
+    border-radius: 8px;
+    width: 40px;
+    box-shadow: none;
+    position: relative;
+    cursor: pointer;
+}
+
+#favorite-btn:hover {
+    background-color: #dcdcdc;
+}
+
+#button-search {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#button-search:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+#settings-btn {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#settings-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+#menu-btn {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+    font-size: 14px;
+}
+
+#menu-btn i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+#menu-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#chat-button {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#chat-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+
+#chat-button,
+#settings-btn,
+#movie-of-the-day-btn,
+#movie-match-btn,
+#movie-match-btn3,
+#movie-timeline-btn,
+#discussions-btn,
+#trivia-btn,
+#back-to-top-btn {
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    transform: translateY(20px);
+    opacity: 0;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #movie-match-btn3,
+    #trivia-btn,
+    #back-to-top-btn {
+        position: fixed;
+        right: 10px;
+        z-index: 1000;
+    }
+
+    #menu-btn {
+        display: block;
+    }
+}
+
+.mobile-bottom-bar {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: auto;
+    background-color: #7378c5;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+    justify-content: space-around;
+    align-items: center;
+    z-index: 1000002;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+}
+
+.mobile-bottom-bar {
+    transition: transform 0.09s ease-in-out;
+}
+
+.hide-bar {
+    transform: translateY(100%);
+}
+
+.mobile-bottom-bar a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    text-align: center;
+    color: white;
+    text-decoration: none;
+    padding: 3px 0;
+    width: 15%;
+}
+
+.mobile-bottom-bar a:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.mobile-bottom-bar i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+.mobile-bottom-bar span {
+    display: block;
+    font-size: 10px;
+    color: #ecf0f1;
+}
+
+#trivia-btn {
+    position: fixed;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #trivia-btn,
+    #menu-btn,
+    #back-to-top-btn {
+        display: none;
+    }
+}
+
+#trivia-label:hover {
+    color: #ff8623;
+}
+
+#trivia-label {
+    margin-top: 50px
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+}
+
+#clear-search-btn {
+    display: block;
+    margin: 20px auto;
+    background-color: #7378c5;
+    color: black;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 10px;
+    font: inherit;
+    margin-right: 20px;
+}
+
+#quiz-container {
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 20px;
+    border-radius: 10px;
+    max-width: calc(100% - 20px);
+    width: 600px;
+    margin: 10px auto;
+    box-sizing: border-box;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#quiz-form {
+    width: calc(100% - 20px);
+    margin: 10px auto;
+    box-sizing: border-box;
+    padding: 0 10px;
+}
+
+@media (max-width: 520px) {
+    #quiz-container, #quiz-form {
+        width: calc(100% - 20px);
+        margin: 10px auto;
+    }
+}
+
+.button {
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 20px;
+}
+
+#clear-search-btn:hover {
+    background-color: #ff8623;
+}
+
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-align: left;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+@media (max-width: 900px) {
+    #profileBtn {
+        display: none;
+    }
+}
+
+@media (max-width: 840px) {
+    #my-heading {
+        margin-left: 0;
+    }
+
+    .back-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: -180px;
+        border-radius: 8px;
+    }
+
+    .about {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 0;
+        border-radius: 8px;
+    }
+
+    .favorites-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 189px;
+        border-radius: 8px;
+        padding-left: 12px;
+        padding-right: 12px;
+        box-sizing: border-box;
+    }
+
+    #googleSignInBtn {
+        display: none;
+    }
+
+    header {
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    main {
+        margin-bottom: -40px;
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #trivia-label {
+        margin-top: 60px;
+    }
+}
+
+#movie-match-btn2 {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/about.html b/MovieVerse-Mobile/platforms/ios/www/html/about.html
new file mode 100644
index 00000000..87048c73
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/about.html
@@ -0,0 +1,1286 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>About The MovieVerse - Your Ultimate Movie Guide</title>
+    <meta property="og:title" content="About The MovieVerse - Your Ultimate Movie Guide" />
+    <meta name="description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
+    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/about.html"/>
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#aboutHeader">About The MovieVerse</a></li>
+            <li><a href="#subheading1">Core Features</a></li>
+            <li><a href="#subheading2">Explore Our Other Apps</a></li>
+            <li><a href="#subheading">Our Vision</a></li>
+            <li><a href="#subheading3">Join The Journey</a></li>
+            <li><a href="#subheading4">Useful Links</a></li>
+            <li><a href="terms-of-service.html">Terms of Service</a></li>
+            <li><a href="privacy-policy.html">Privacy Policy</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
+    <main id="main2" style="margin: 0 auto">
+        <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
+        <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
+        <div style="width: 100%">
+            <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
+        </div>
+
+        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
+        <h3 id="subheading1" style="cursor: pointer">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">
+            <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 specialized sections like Director's Spotlight and award-winning films.</li>
+            <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
+            <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Interactive Discussions and Trivia:</strong> Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.</li>
+            <li><i style="margin-right: 3px" class="fas fa-fire"></i> <strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.</li>
+            <li><i style="margin-right: 3px" class="fas fa-clock"></i> <strong>Movie Timeline:</strong> Select a period and explore a curated list of movies from that era, offering a unique way to experience the evolution of film over time.</li>
+            <li><i style="margin-right: 3px" class="fas fa-heart"></i> <strong>Movie Match/Recommendation:</strong> Find or get recommended a movie that matches your mood, genre, and time period, ensuring you always find the perfect movie to watch.</li>
+            <li><i style="margin-right: 3px" class="fas fa-info-circle"></i> <strong>Detailed Filmography Insights:</strong> Delve into the careers of your favorite <a id="githubLink1" href="director-details.html">directors</a>, <a id="githubLink1" href="actor-details.html">actors</a>, and <a id="githubLink1" href="company-details.html">companies</a> with dedicated pages detailing their filmography and impact on cinema.</li>
+            <li><i style="margin-right: 3px" class="fas fa-sign-in-alt"></i> <strong>Sign In/Sign Out:</strong> Sign in to your account to access your personalized movie recommendations, <a id="githubLink1" href="favorites.html">watch lists</a>, <a id="githubLink1" href="user-profile.html">profile</a>, and more.</li>
+            <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Watch Lists:</strong> Save movies to your watch lists and share them with your loved ones, ensuring you never miss out on a movie you want to watch. If you're signed in, your watch lists are <a id="githubLink1" href="favorites.html">accessible</a> across all your devices!</li>
+            <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Chat Functionality:</strong> Engage with fellow movie enthusiasts through our secure <a id="githubLink1" href="chat.html">chat</a> feature, where you can discuss and connect with like-minded MovieVerse individuals!</li>
+            <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Search Functionality:</strong> Use our extensive <a id="githubLink1" href="search.html">search</a> functionality to find movies, actors, directors, and TV series, ensuring you always find what you're looking for.</li>
+            <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
+            <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
+        </ul>
+
+        <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
+
+        <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
+
+        <ul style="align-content: center; color: white">
+            <li>
+                <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';" class="app-btn">The StickyNotes App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Embark on a culinary adventure with RecipeGenie, your go-to database for delightful recipes.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';" class="app-btn">The RecipeGenie Database</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Stay ahead of the weather with WeatherMate, your personal weather forecasting assistant.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';" class="app-btn">The WeatherMate App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Keep track of your tasks and boost productivity with the ToDo App, a straightforward task manager.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-ToDo-App/';" class="app-btn">The ToDo App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Plan and manage your events seamlessly with EventHorizon, your ultimate event organizer.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
+            </li>
+        </ul>
+
+        <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
+        <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
+
+        <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
+        <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
+        <br/>
+        <p style="color: white; text-align: center">Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of movies!</p>
+        <br/>
+        <p style="color: white; text-align: center">
+            <em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <strong><a style="color: #ff8623" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a></strong>.
+                <i style="margin-left: 3px" class="fab fa-github"></i>
+            </em>
+        </p>
+
+        <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
+        <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
+        <br/>
+        <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
+        <br/>
+        <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
+
+        <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
+        <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
+        <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
+        <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
+    </main>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
+        </a>
+    </footer>
+
+    <script>
+        document.getElementById('logo').addEventListener('click', function() {
+            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
+
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+
+        document.getElementById('logo').addEventListener('mouseover', function() {
+            this.style.cursor = 'pointer';
+            this.style.transform = 'scale(1.05)';
+            this.style.transition = '0.3s ease-in-out';
+        });
+
+        document.getElementById('logo').addEventListener('mouseout', function() {
+            this.style.transform = 'scale(1)';
+        });
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById("subheading1").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading2").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading2').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading3").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading3').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading4").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading4').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("aboutHeader").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('aboutHeader').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/actor-details.html b/MovieVerse-Mobile/platforms/ios/www/html/actor-details.html
new file mode 100644
index 00000000..e96b40fe
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/actor-details.html
@@ -0,0 +1,808 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Actor Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html">
+    <meta property="og:title" content="Actor Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        #actor-details-container {
+            margin-top: 0;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #actor-details-container {
+                margin-top: 25px;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #actor-details-container {
+            margin-top: 25px;
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <main id="main" style="margin-left: 25px; height: 0"></main>
+
+    <div class="details-container" id="actor-details-container" style="margin-bottom: 70px;">
+        <!-- Left side for Actor Image -->
+        <div class="actor-left" style="overflow-y: hidden">
+            <h2 id="actor-name" class="actor-header"></h2>
+            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
+            <div style="height: 20px"></div>
+        </div>
+        <!-- Right side for Description and Info -->
+        <div class="actor-right" id="actor-description">
+            <!-- Actor details will be populated here -->
+        </div>
+    </div>
+
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script src="../js/actor-details.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('actor-image').addEventListener('click', function() {
+            const imageUrl = this.src.replace('w1280', 'original')
+            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/analytics.html b/MovieVerse-Mobile/platforms/ios/www/html/analytics.html
new file mode 100644
index 00000000..9b02e879
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/analytics.html
@@ -0,0 +1,910 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Database Analytics - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html">
+    <meta property="og:title" content="Database Analytics - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="https://movie-verse.com/MovieVerse-Frontend/css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("https://movie-verse.com/images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards 0.5s;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        @keyframes dropIn {
+            0% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: dropIn 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1s;
+        }
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0" class="notranslate">
+            <h1 id="my-heading" style="margin-bottom: -10px">
+                The Mo<span class="highlight">vieV</span>erse
+            </h1>
+        </a>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="#chart1">Annual Releases</a></li>
+            <li><a href="#chart2">Genre Popularity</a></li>
+            <li><a href="#chart3">Certification Breakdown</a></li>
+            <li><a href="#chart4">Popularity Trends</a></li>
+            <li><a href="#chart5">Language Counts</a></li>
+            <li><a href="#chart6">Votes by Genre</a></li>
+            <li><a href="#chart7">Monthly Releases</a></li>
+            <li><a href="#chart8">Decadal Releases</a></li>
+            <li><a href="#chart9">Country Releases</a></li>
+            <li><a href="#chart11">Yearly Top Movies</a></li>
+            <li><a href="#chartVotesOverYears">Votes Over Time</a></li>
+            <li><a href="#chartHighlyRatedMovies">Top Movies Trends</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+        </ul>
+    </nav>
+    <div>
+        <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div class="chart-container" style="margin-bottom: 250px">
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title1" style="cursor: pointer">Number of Movies Released Each Year</h2>
+            <canvas id="chart1"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title2" style="cursor: pointer">Popularity of Genres</h2>
+            <canvas id="chart2"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title3" style="cursor: pointer">Movies Distribution by Certification</h2>
+            <canvas id="chart3"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title4" style="cursor: pointer">Average Movie Popularity Over Time</h2>
+            <canvas id="chart4"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title5" style="cursor: pointer">Movies Count by Original Language</h2>
+            <canvas id="chart5"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title6" style="cursor: pointer">Average Vote Count by Genre</h2>
+            <canvas id="chart6"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title7" style="cursor: pointer">Movie Releases by Month</h2>
+            <canvas id="chart7"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title8" style="cursor: pointer">Movie Releases by Decades</h2>
+            <canvas id="chart8"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title9" style="cursor: pointer">Movie Releases by Countries</h2>
+            <canvas id="chart9"></canvas>
+        </div>
+        <div class="chart-box" id="chart-title1">
+            <h2 class="chart-title" id="chart-title10" style="cursor: pointer">Top Rated Movies per Year</h2>
+            <canvas id="chart11"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title11" style="cursor: pointer">Total Movie Votes Over Years</h2>
+            <canvas id="chartVotesOverYears"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated Movies Over Years</h2>
+            <canvas id="chartHighlyRatedMovies"></canvas>
+        </div>
+    </div>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="ad-container2" style="display: block; text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script src="../js/analytics.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData1()}/3/search/multi?${getMovieNames1()}${getMovieCode1()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.error("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.error('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData1()}/3/person/${item.id}?${getMovieNames1()}${getMovieCode1()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.error('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        function getMovieVerseData1(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function getMovieNames1(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode1() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/api_fails.html b/MovieVerse-Mobile/platforms/ios/www/html/api_fails.html
new file mode 100644
index 00000000..c7fa1c18
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/api_fails.html
@@ -0,0 +1,1026 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>We're Offline - The MovieVerse</title>
+    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html">
+    <meta property="og:title" content="We're Offline - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="We're Offline - The MovieVerse">
+    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="center-text" style="padding: 120px;">
+        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">MovieVerse is Offline</div>
+        <p>We're sorry, our service is currently unavailable. This could be due to a temporary issue with our servers or your internet connection. Please try again.</p>
+        <p>If you continue to experience issues, please contact our support team at <a id="link" href="support.html">our support page</a>.</p>
+        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
+    </div>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 500px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/article.hbs b/MovieVerse-Mobile/platforms/ios/www/html/article.hbs
new file mode 100644
index 00000000..644be6cd
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/article.hbs
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{article.title}}</title>
+</head>
+<body>
+  <header>
+    <h1>{{article.title}}</h1>
+    <p>Written by: {{article.author}}</p>
+  </header>
+  <article>
+    <p>{{article.content}}</p>
+  </article>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/chat.html b/MovieVerse-Mobile/platforms/ios/www/html/chat.html
new file mode 100644
index 00000000..4054ba67
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/chat.html
@@ -0,0 +1,1023 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chat - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Chat - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chat.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chat.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Chat - The MovieVerse">
+    <meta name="twitter:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .user-search-result {
+            background-color: #333;
+            margin: 10px auto;
+            padding: 10px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            color: white;
+            transition: background-color 0.3s ease;
+            flex-wrap: wrap;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+        }
+        .user-search-result img {
+            flex-shrink: 0;
+            margin-right: 10px;
+            border-radius: 8px;
+        }
+        .user-search-result > div {
+            flex: 1;
+            min-width: 120px;
+            word-break: break-word;
+        }
+        .tooltip {
+            position: absolute;
+            background-color: #333;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            z-index: 100;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+            white-space: nowrap;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #main {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            min-height: 80vh;
+        }
+        #userListContainer {
+            flex-basis: 30%;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+        #searchUserInput {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ff8623;
+            margin-bottom: 10px;
+            background-color: #333;
+            color: white;
+        }
+        @media (min-width: 768px) {
+            #searchUserInput {
+                min-width: 320px;
+            }
+        }
+        .user:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .user {
+            border-radius: 8px;
+            padding: 5px;
+            cursor: pointer;
+        }
+        .user-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            background-color: #333;
+            color: white;
+        }
+        .user-item:hover {
+            background-color: #ff8623;
+        }
+        .user-avatar {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+        .user-info {
+            flex-grow: 1;
+        }
+        .user-email {
+            font-weight: bold;
+        }
+        .user-bio {
+            color: #ccc;
+        }
+        #chatSection {
+            display: flex;
+            flex-direction: column;
+            flex-basis: 65%;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+            min-height: 90vh;
+        }
+        #messages {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background: none;
+            display: flex;
+            flex-direction: column;
+            border-radius: 8px;
+        }
+        #chatInput {
+            padding: 10px;
+            border-top: 1px solid #ccc;
+        }
+        #userEmailDisplay {
+            background-color: #ff8623;
+            color: white;
+            border-radius: 10px;
+            padding: 10px;
+        }
+        .message {
+            margin: 5px 0;
+            padding: 10px;
+            border-radius: 8px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .my-message {
+            align-self: flex-end;
+            background-color: #ff8623;
+            color: white;
+        }
+        .other-message {
+            align-self: flex-start;
+            background-color: #7378c5;
+            color: white;
+        }
+        #chatInput {
+            padding: 10px;
+            border-top: 1px solid #ccc;
+        }
+        #messageInput {
+            flex-grow: 1;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ff8623;
+            background-color: #333;
+            color: white;
+            width: 100%;
+        }
+        #sendButton {
+            padding: 10px 20px;
+            border-radius: 5px;
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #sendButton:hover {
+            background-color: #7f4caf;
+        }
+        #main {
+            display: flex;
+            justify-content: space-between;
+            align-items: stretch;
+            min-height: 80vh;
+            gap: 20px;
+        }
+        #userListContainer {
+            flex: 1;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+        #chatSection {
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+            padding: 20px;
+        }
+        @media (max-width: 900px) {
+            #main {
+                flex-direction: column;
+                align-items: center;
+                width: 100%;
+                margin-left: 0;
+            }
+            #userListContainer, #chatSection {
+                width: 90% !important;
+                margin: 0 auto;
+                max-width: 100% !important;
+                display: flex;
+                flex-direction: column;
+            }
+            #userList {
+                max-height: 300px;
+                overflow-y: auto;
+            }
+            #chatSection {
+                width: 100% !important;
+                flex-grow: 1;
+            }
+            #noUserSelected {
+                width: 90% !important;
+                flex-grow: 1;
+            }
+        }
+        .selected-user {
+            background-color: #ff8623;
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <main id="main" style="margin-bottom: 20px">
+        <div id="userListContainer">
+            <div id="searchContainer">
+                <input type="text" id="searchUserInput" placeholder="Search for a user" style="font: inherit" />
+            </div>
+            <div id="searchUserResults"></div>
+            <h3>Recent & Suggested Chats</h3>
+            <div id="userList"></div>
+        </div>
+        <div id="chatSection">
+            <div id="userEmailDisplay" style="padding: 10px;"></div>
+            <div id="messages"></div>
+            <div id="chatInput">
+                <input type="text" id="messageInput" placeholder="Type your message" style="font: inherit" />
+                <button id="sendButton">Send</button>
+            </div>
+        </div>
+        <div id="noUserSelected" style="flex-basis: 65%; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; color: white; display: flex; justify-content: center; align-items: center; min-height: 90vh;">
+            <p>Welcome to MovieVerse Chats! Select or find a user to begin chatting with your fellow movie enthusiasts!</p>
+        </div>
+    </main>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
+    </div>
+    <footer id="footer">
+        <p>© 2024 The MovieVerse. All rights reserved.</p>
+    </footer>
+    <script type="module" src="../js/chat.js"></script>
+    <script src="../js/chat-auxiliary.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/chatbot.html b/MovieVerse-Mobile/platforms/ios/www/html/chatbot.html
new file mode 100644
index 00000000..c3f9dc5c
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/chatbot.html
@@ -0,0 +1,846 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Chatbot - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html">
+    <meta property="og:title" content="Chatbot - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Chatbot - The MovieVerse">
+    <meta name="twitter:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="manifest" href="../../manifest.json">
+    <script type="importmap">
+        {
+          "imports": {
+            "@google/generative-ai": "https://esm.run/@google/generative-ai"
+          }
+        }
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        #header {
+            margin-top: 26px;
+            padding-left: 25px;
+        }
+        #form {
+            margin-top: -5px;
+            margin-right: 55px;
+        }
+        @media (max-width: 800px){
+            #header {
+                margin-top: 10px;
+            }
+            #form {
+                margin-top: -15px;
+                margin-right: 0;
+            }
+        }
+        @media (min-width: 900px) {
+            #header {
+                margin-top: 26px;
+                padding-left: 25px;
+            }
+            #form {
+                margin-top: 2px;
+            }
+            #my-heading {
+                margin-top: 17px !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #my-heading {
+                margin-top: 9px !important;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        #homepage-header {
+            margin-top: -10px;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+            #homepage-header {
+                margin-top: 10px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="bot-header">
+        <h2 id="search-title">The <span class="highlight1">MovieVerse</span> Assistant</h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+        <h4 id="alt-title" style="font-weight: normal; font-size: 15px; color: #ff8623">Dive deep into the movie world with our expert assistant!</h4>
+    </div>
+    <main id="main" style="padding: 0; margin: 0 auto; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 400px">
+        <div id="chatbotContainer">
+            <div id="chatbotHeader">The MovieVerse Assistant</div>
+            <div id="chatbotBody"></div>
+            <input id="chatbotInput" type="text" placeholder="Ask me about anything..." title="Type your message here"/>
+            <button id="sendButton" title="Send this message">Send</button>
+        </div>
+    </main>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/chatbot.js" type="module"></script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading response...</p>
+    </div>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; color: white; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+            });
+
+            function displaySearchResults(results) {
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+                    details.style.textAlign = 'left';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+    </script>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/christopher-nolan.html b/MovieVerse-Mobile/platforms/ios/www/html/christopher-nolan.html
new file mode 100644
index 00000000..2874ec08
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/christopher-nolan.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Director Details - Explore More About Christopher Nolan</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/christopher-nolan.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html">
+    <meta property="og:title" content="Director Details - Christopher Nolan">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Director Details - Christopher Nolan">
+    <meta name="twitter:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" style="margin-left: 25px">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 25px; margin-bottom: -40px">
+
+    </main>
+
+    <div class="details-container" id="director-details-container">
+        <!-- Left side for Director Image -->
+        <div class="director-left" style="overflow: hidden">
+            <h2 id="director-name" class="director-header"></h2>
+            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; overflow: hidden"/>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="director-right" id="director-description">
+            <!-- Director details will be populated here -->
+        </div>
+    </div>
+
+    <script src="../js/christopher-nolan.js"></script>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+
+<script>
+    function getMovieVerseData(input) {
+        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+    }
+
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.log('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    const movieCode = {
+        part1: 'YzVhMjBjODY=',
+        part2: 'MWFjZjdiYjg=',
+        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+    };
+
+    function getMovieCode() {
+        return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+    }
+
+    function generateMovieNames(input) {
+        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+    }
+
+    function fallbackMovieSelection() {
+        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+        localStorage.setItem('selectedMovieId', randomFallbackMovie);
+        window.location.href = 'movie-details.html';
+    }
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const savedBg = localStorage.getItem('backgroundImage');
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+
+            if (savedBg) {
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+            }
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+</script>
+
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/company-details.html b/MovieVerse-Mobile/platforms/ios/www/html/company-details.html
new file mode 100644
index 00000000..f0b6c77c
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/company-details.html
@@ -0,0 +1,795 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Company Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/company-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Company Details - The MovieVerse" />
+    <meta name="description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Company Details - The MovieVerse">
+    <meta name="twitter:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @media (min-width: 800px) {
+            footer {
+                margin-top: 500px;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: 0 !important;
+            }
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <main id="main" style="margin-left: 25px; height: 0"></main>
+    <div class="details-container" id="company-details-container" style="margin-bottom: 650px">
+        <div class="company-left">
+            <div class="title-logo-container">
+                <h2 id="company-name" class="company-header"></h2>
+                <img id="company-logo" alt="Loading Company Details..." style="z-index: 1000000000; width: 25vw; background-color: #ffffff; border-radius: 8px;"/>
+            </div>
+        </div>
+        <div class="company-right">
+            <p id="company-description" class="company-description"></p>
+            <p><strong>Headquarters:</strong> <span id="company-headquarters"></span></p>
+            <p><strong>Country:</strong> <span id="company-country"></span></p>
+            <p><strong>Website:</strong> <a id="company-website" href="" target="_blank"></a></p>
+            <p style="text-align: center"><strong>Produced Movies:</strong></p>
+            <div style="text-align: center" id="company-movies-list" class="movies-list"></div>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 250px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/company-details.js"></script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('company-logo').addEventListener('click', function() {
+            const imageUrl = this.src.replace('w500', 'original');
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/create-account.html b/MovieVerse-Mobile/platforms/ios/www/html/create-account.html
new file mode 100644
index 00000000..ad374615
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/create-account.html
@@ -0,0 +1,1052 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Create Account - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html">
+    <meta property="og:title" content="Create Account - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Create Account - The MovieVerse">
+    <meta name="twitter:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="theme-color" content="#7378c5">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .account-creation-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .account-creation-form-container input[type="email"],
+        .account-creation-form-container input[type="password"],
+        .account-creation-form-container input[type="text"],
+        .account-creation-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .account-creation-form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+        .account-creation-form-container button:hover {
+            background-color: #22254b;
+            color: white;
+        }
+        .account-creation-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .account-creation-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+        #back-to-sign-in {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #back-to-sign-in:hover {
+            background-color: #22254b;
+            color: white;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0;
+            }
+        }
+        #local-time {
+            transform: translateX(12%);
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="account-creation-form-container" id="account-creation-form-container" style="margin-bottom: 300px">
+        <form id="createAccountForm">
+            <h2>Create Account</h2>
+            <p style="color: black">Create an account to personalize your movie recommendations, save  <a style="text-decoration: underline" id="githubLink1" href="favorites.html">favorites</a>, and enhance your movie discovery experience.</p>
+            <input type="email" id="newEmail" placeholder="Email" required>
+            <input type="password" id="newPassword" placeholder="Password" required>
+            <input type="password" id="confirmPassword" placeholder="Re-type Password" required>
+            <label style="margin-top: 10px; margin-bottom: 10px">
+                <input type="checkbox" id="togglePassword"> Show Password
+            </label>
+            <button type="submit">Create Account</button>
+            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
+        </form>
+    </div>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('newPassword');
+            const confirmPasswordInput = document.getElementById('confirmPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+                confirmPasswordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+                confirmPasswordInput.type = 'password';
+            }
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script src="../js/create-account.js" type="module"></script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+    </script>
+    <footer style="margin-top: 650px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/director-details.html b/MovieVerse-Mobile/platforms/ios/www/html/director-details.html
new file mode 100644
index 00000000..55acbdc4
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/director-details.html
@@ -0,0 +1,835 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Director Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/director-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html">
+    <meta property="og:title" content="Director Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Director Details - The MovieVerse">
+    <meta name="twitter:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        header {
+            margin-top: -5px;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="details-container" id="director-details-container" style="margin-top: -50px; margin-bottom: 60px">
+        <!-- Left side for Director Image -->
+        <div class="director-left" style="overflow-y: hidden">
+            <h2 id="director-name" class="director-header"></h2>
+            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
+            <div style="height: 20px"></div>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="director-right" id="director-description">
+            <!-- Director details will be populated here -->
+        </div>
+    </div>
+
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/director-details.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+
+<script>
+    function getMovieVerseData(input) {
+        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+    }
+
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.log('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    const movieCode1 = {
+        part1: 'YzVhMjBjODY=',
+        part2: 'MWFjZjdiYjg=',
+        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+    };
+
+    function getMovieCode() {
+        return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+    }
+
+    function generateMovieNames(input) {
+        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+    }
+
+    function fallbackMovieSelection() {
+        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+        localStorage.setItem('selectedMovieId', randomFallbackMovie);
+        window.location.href = 'movie-details.html';
+    }
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const savedBg = localStorage.getItem('backgroundImage');
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+
+            if (savedBg) {
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+            }
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+
+    document.getElementById('director-image').addEventListener('click', function() {
+        const imageUrl = this.src.replace('w1280', 'original');
+        const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+        document.getElementById('image-modal').addEventListener('click', function(event) {
+            if (event.target === this) {
+                this.remove();
+            }
+        });
+    });
+</script>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/favorites.html b/MovieVerse-Mobile/platforms/ios/www/html/favorites.html
new file mode 100644
index 00000000..a679ec41
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/favorites.html
@@ -0,0 +1,1102 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Favorites & Watchlists - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/movie-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Favorites & Watchlists - The MovieVerse" />
+    <meta name="description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <script src="../js/settings.js"></script>
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Favorites & Watchlists - The MovieVerse">
+    <meta name="twitter:description" content="Manage your favorite movies and watch lists on The MovieVerse. Keep track of movies you love and organize your watch lists for future viewing.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <script src="../js/favorites.js" type="module"></script>
+    <link rel="manifest" href="../../manifest.json">
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .watchlist-controls {
+            position: absolute;
+            top: 10px;
+            display: flex;
+            align-items: start;
+            gap: 5px;
+        }
+        .watchlist-controls button {
+            background: none;
+            border: none;
+            color: #ff8623;
+            cursor: pointer;
+            height: 20px;
+            width: 20px;
+            margin-right: 8px;
+            font-size: 18px;
+        }
+        #create-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #edit-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #delete-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        .watchlist.pinned .watchlist-controls #pin-btn {
+            color: #7378c5;
+        }
+        .watchlist-controls button:hover {
+            color: #7378c5;
+        }
+        .watchlist-controls button:first-child {
+            order: -1;
+        }
+        .watchlist {
+            position: relative;
+            padding-top: 30px;
+        }
+        .watchlist.pinned {
+            border: 2px solid yellow;
+        }
+        .watchlist-buttons-container {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-left: 0;
+            margin-top: 35px;
+            margin-bottom: 15px;
+        }
+        @media (max-width: 1200px) {
+            #local-time {
+                display: none;
+            }
+        }
+        #button {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        #how-to-use {
+            text-align: center;
+            margin-top: 20px;
+            margin-bottom: 60px;
+        }
+        #how-to-use-btn {
+            background-color: #7378c5;
+            color: white;
+            border-radius: 8px;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font: inherit;
+            cursor: pointer;
+            border: none;
+        }
+        #how-to-use-btn:hover {
+            background-color: #ff8623;
+        }
+        #how-to-use-section {
+            max-width: 400px;
+            margin: 20px auto;
+            padding: 15px;
+            background-color: #7378c5;
+            color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            display: none;
+            transition: height 0.5s ease-in-out;
+            margin-bottom: 240px;
+        }
+        #how-to-use-section:hover {
+            background-color: #6e73bd;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #githubLink3 {
+            color: white !important;
+        }
+        #githubLink3:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -30px; padding-top: 19px">
+        <div id="header-title">
+            <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
+                <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                    The Mo<span class="highlight" id="highlight">vieV</span>erse
+                </a>
+            </h1>
+        </div>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 5px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul id="watchlist-links" style="overflow-y: auto">
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
+    <div class="watchlist-buttons-container">
+        <button id="create-watchlist-btn">Create Watch Lists</button>
+        <button id="edit-watchlist-btn">Edit Watch Lists</button>
+        <button id="delete-watchlist-btn">Delete Watch Lists</button>
+    </div>
+
+    <div id="create-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('create-watchlist-modal')">&times;</span>
+            <h2>Create a Watch List</h2>
+            <form id="create-watchlist-form">
+                <label>Name:</label>
+                <input type="text" id="new-watchlist-name" placeholder="Watchlist's Name" style="font: inherit" required>
+                <div style="height: 20px"></div>
+                <label>Description:</label>
+                <textarea placeholder="Watchlist Description" id="new-watchlist-description" style="font: inherit"></textarea>
+                <button type="submit" id="button" style="display: block; margin-left: auto; color: white; margin-right: auto;">Create</button>
+            </form>
+        </div>
+    </div>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <div id="edit-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('edit-watchlist-modal')">&times;</span>
+            <h2>Edit a Watch List</h2>
+            <form id="edit-watchlist-form">
+                <!-- Dynamically populate this form based on user selection -->
+            </form>
+        </div>
+    </div>
+
+    <div id="delete-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('delete-watchlist-modal')">&times;</span>
+            <h2>Delete Watch Lists</h2>
+            <label>Select watch lists to delete:</label>
+            <form id="delete-watchlist-form">
+                <!-- Dynamically populate this form based on user selection -->
+            </form>
+        </div>
+    </div>
+
+    <div id="watchlists-display-section">
+        <!-- Dynamically populated watch lists will go here -->
+    </div>
+
+    <main id="favorites-main" style="margin-top: 75px; text-align: center"></main>
+    <main id="favorites-main-tv" style="margin-top: 75px; text-align: center"></main>
+
+    <div id="how-to-use">
+        <button id="how-to-use-btn">How to Use</button>
+    </div>
+
+    <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
+        <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
+        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
+        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
+        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
+        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
+        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
+        <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists! 🍿🎬</p>
+    </div>
+
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink3" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" title="Go to top" style="bottom: 90px; right: 10px; z-index: 10012" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">Back to Top</button>
+    <script src="../js/movie-details.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
+        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
+
+        let initialMoviesSelection = [];
+        let initialTVSeriesSelection = [];
+
+        function translateFBC(value) {
+            return atob(value);
+        }
+
+        function getFBConfig1() {
+            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
+            return translateFBC(fbConfig1);
+        }
+
+        function getFBConfig2() {
+            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
+            return translateFBC(fbConfig2);
+        }
+
+        function getFBConfig3() {
+            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
+            return translateFBC(fbConfig3);
+        }
+
+        function getFBConfig4() {
+            const fbConfig4 = "ODAyOTQzNzE4ODcx";
+            return translateFBC(fbConfig4);
+        }
+
+        function getFBConfig5() {
+            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
+            return translateFBC(fbConfig5);
+        }
+
+        const firebaseConfig = {
+            apiKey: getFBConfig1(),
+            authDomain: getFBConfig2(),
+            projectId: "movieverse-app",
+            storageBucket: getFBConfig3(),
+            messagingSenderId: getFBConfig4(),
+            appId: getFBConfig5()
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const db = getFirestore(app);
+
+        async function loadNavWatchlistLinks() {
+            const navList = document.getElementById('watchlist-links');
+            const firstStaticItem = navList.querySelector('li');
+
+            try {
+                showSpinner();
+
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                let watchlists = [];
+
+                if (currentUserEmail) {
+                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+                    const querySnapshot = await getDocs(q);
+                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
+                }
+                else {
+                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+                }
+
+                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
+                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
+
+                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
+
+                let counter = 1;
+
+                watchlists.forEach(watchlist => {
+                    const listItem = document.createElement('li');
+                    listItem.className = 'dynamic';
+                    const link = document.createElement('a');
+                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
+
+                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
+                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
+                        counter++;
+                    }
+                    else {
+                        link.textContent = watchlist.name;
+                    }
+
+                    listItem.appendChild(link);
+                    navList.insertBefore(listItem, firstStaticItem);
+                });
+
+                hideSpinner();
+                assignIdsToWatchlists();
+            }
+            catch (error) {
+                console.error('Error loading watchlists for navigation:', error);
+                hideSpinner();
+            }
+        }
+
+        function assignIdsToWatchlists() {
+            document.querySelectorAll('.watchlist').forEach(watchlist => {
+                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
+                if (!watchlist.id) {
+                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
+    </script>
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/feedback.html b/MovieVerse-Mobile/platforms/ios/www/html/feedback.html
new file mode 100644
index 00000000..41e43187
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/feedback.html
@@ -0,0 +1,1107 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feedback - The MovieVerse</title>
+    <meta name="description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them." />
+    <meta property="og:title" content="Feedback - The MovieVerse">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Feedback - The MovieVerse">
+    <meta name="twitter:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .form-container h1 {
+            color: #ff8623;
+        }
+        .form-container input,
+        .form-container textarea,
+        .form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .form-container button[type="submit"]:hover {
+            background-color: #ff8623;
+        }
+        .form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #supportBtn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #supportBtn:hover {
+            background-color: #ff8623;
+        }
+        @media (min-width: 900px) {
+            #my-heading {
+                margin-top: 15px !important;
+            }
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="form-container">
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Feedback</div>
+        <p style="color: black">Noticed a bug? Have a suggestion? Wrong movie information? Or just want to say hi? We'd love to hear from you!</p>
+        <form action="https://formspree.io/f/xqkrbdqd" method="POST">
+            <input type="text" id="name" name="name" placeholder="Your Name" required>
+            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
+            <textarea id="message" name="message" placeholder="Your Feedback" required></textarea>
+            <button type="submit">Send Feedback</button>
+            <p style="color: black">Need immediate assistance? Submit a support request using the link below and we'll get back to you as soon as possible.</p>
+        </form>
+        <button id="supportBtn" onclick="window.location.href='support.html'">Request Support</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        function updateClock() {
+            var now = new Date();
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            hours = hours < 10 ? '0' + hours : hours;
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            var timeString = hours + ':' + minutes;
+            document.getElementById('clock').innerHTML = timeString;
+        }
+
+        setInterval(updateClock, 1000);
+        window.onload = updateClock;
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 200px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/inception.html b/MovieVerse-Mobile/platforms/ios/www/html/inception.html
new file mode 100644
index 00000000..897d13a4
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/inception.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Details - Explore Inception by Christopher Nolan</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/inception.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/inception.html">
+    <meta property="og:title" content="Movie Details - Explore Inception by Christopher Nolan">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/inception.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/inception.jpg"/>
+    <meta property="og:image:alt" content="Inception Movie Poster">
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Details - Explore Inception by Christopher Nolan">
+    <meta name="twitter:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px">
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 35px; margin-top: 20px">
+
+    </main>
+
+    <div class="details-container" id="movie-details-container">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw"/>
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px"><strong>0.0/5.0</strong></span>
+        </div>
+
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+            <div id="comments-section">
+                <h3>Community Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Toggle Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This Movie</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname" required>
+                            <textarea id="user-comment" placeholder="Your comment" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your ideas!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script src="../js/inception.js"></script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('movie-image').addEventListener('click', function() {
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+
+    <script src="../js/comments.js" type="module"></script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/leonardo-dicaprio.html b/MovieVerse-Mobile/platforms/ios/www/html/leonardo-dicaprio.html
new file mode 100644
index 00000000..18a4d369
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/leonardo-dicaprio.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Actor Details - Leonardo DiCaprio</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta name="description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html">
+    <meta property="og:title" content="Actor Details - Leonardo DiCaprio">
+    <meta property="og:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Actor Details - Leonardo DiCaprio">
+    <meta name="twitter:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <script src="../js/leonardo-dicarprio.js" defer></script>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            background-image: url("https://movie-verse.com/images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+
+            <div id="search-results" class="search-results"></div>
+
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" style="margin-left: 25px">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 25px"></main>
+
+    <div class="details-container" id="actor-details-container">
+        <!-- Left side for Actor Image -->
+        <div class="actor-left" style="overflow: hidden">
+            <h2 id="actor-name" class="actor-header"></h2>
+            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw"/>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="actor-right" id="actor-description">
+            <!-- Actor details will be populated here -->
+        </div>
+    </div>
+
+    <script src="../js/leonardo-dicarprio.js"></script>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('actor-image').addEventListener('click', function() {
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/movie-details.html b/MovieVerse-Mobile/platforms/ios/www/html/movie-details.html
new file mode 100644
index 00000000..bfc4fb00
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/movie-details.html
@@ -0,0 +1,907 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/movie-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html">
+    <meta property="og:title" content="Movie Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Details - The MovieVerse">
+    <meta name="twitter:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        #favorite-btn:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        .favorited:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #movie-details-container {
+                margin-top: -50px;
+            }
+        }
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #rating-header {
+            color: #ffeb3b;
+        }
+        #rating-header:hover {
+            color: #ff8623;
+            transition: 0.2s ease-in;
+        }
+        #movie-details-container {
+            margin-top: 39px;
+        }
+        .movie-left {
+            margin-top: -10px;
+        }
+        @media (max-width: 767px) {
+            #movie-details-container {
+                margin-top: 0;
+            }
+            #form1 {
+                margin-bottom: 39px;
+            }
+            .movie-left {
+                margin-top: -40px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" >
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none; height: 0">
+        <h2 id="search-title"></h2>
+    </div>
+    <main id="main" style="margin-left: 35px; height: 0"></main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
+            <div id="comments-section">
+                <h3>Movie Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Toggle Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal" style="z-index: 100005">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This Movie</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
+                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right" style="position: relative; overflow: hidden">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: -20px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/movie-details.js"></script>
+    <script src="../js/add-to-favorites.js" type="module"></script>
+    <script type="module">
+        import { toggleFavorite, checkAndUpdateFavoriteButton } from '../js/add-to-favorites.js';
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const favoriteBtn = document.getElementById('favorite-btn');
+            if (favoriteBtn) {
+                favoriteBtn.addEventListener('click', toggleFavorite);
+            }
+        });
+
+        checkAndUpdateFavoriteButton();
+    </script>
+    <script type="module">
+        import { loadUserRatings, updateAverageMovieRating } from '../js/ratings-module.js';
+
+        document.addEventListener('DOMContentLoaded', async () => {
+            const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+            const savedRatings = await loadUserRatings(currentUserEmail);
+            const movieId = localStorage.getItem('selectedMovieId');
+            const movieRating = savedRatings[movieId] || 0;
+            setStarRating(movieRating);
+        });
+
+        function setStarRating(rating) {
+            const stars = document.querySelectorAll('.rating .star');
+            stars.forEach(star => {
+                star.style.color = star.dataset.value > rating ? 'white' : 'gold';
+            });
+            document.getElementById('rating-value').textContent = `${rating}.0/5.0`;
+        }
+
+        let isHovering = false;
+
+        const stars = document.querySelectorAll('.rating .star');
+        stars.forEach(star => {
+            star.addEventListener('mouseover', (e) => {
+                isHovering = true;
+                setStarRating(e.target.dataset.value);
+            });
+
+            star.addEventListener('mouseout', () => {
+                isHovering = false;
+                setTimeout(() => {
+                    if (!isHovering) {
+                        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                        loadUserRatings(currentUserEmail).then(savedRatings => {
+                            const movieId = localStorage.getItem('selectedMovieId');
+                            const movieRating = savedRatings[movieId] || 0;
+                            setStarRating(movieRating);
+                        });
+                    }
+                }, 10);
+            });
+
+            star.addEventListener('click', async (e) => {
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                const movieId = localStorage.getItem('selectedMovieId');
+                const rating = e.target.dataset.value;
+                await updateAverageMovieRating(currentUserEmail, movieId, rating);
+                window.location.reload();
+            });
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <script>
+        document.getElementById('movie-image').addEventListener('click', function() {
+            let imageUrl = this.src.replace('w780', 'original');
+            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+    <script src="../js/comments.js" type="module"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/movie-match.html b/MovieVerse-Mobile/platforms/ios/www/html/movie-match.html
new file mode 100644
index 00000000..6d4e0045
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/movie-match.html
@@ -0,0 +1,854 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Match - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html">
+    <meta property="og:title" content="Movie Match - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Match - The MovieVerse">
+    <meta name="twitter:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #search {
+            margin-top: -1px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <main id="movie-match-main" style="margin-bottom: 45vh">
+        <div class="movie-match-container">
+            <h2 id="search-title1">Find Your Movie Match</h2>
+            <form id="movie-match-form">
+                <label for="mood">Select Your Mood:</label>
+                <select id="mood">
+                    <option value="happy">Happy</option>
+                    <option value="sad">Sad</option>
+                    <option value="angry">Scary</option>
+                    <option value="adventurous">Adventurous</option>
+                    <option value="romantic">Romantic</option>
+                    <option value="thoughtful">Thoughtful</option>
+                </select>
+                <label for="genre">Preferred Genre:</label>
+                <select id="genre">
+                    <option value="action">Action</option>
+                    <option value="comedy">Comedy</option>
+                    <option value="drama">Drama</option>
+                    <option value="sci-fi">Sci-Fi</option>
+                    <option value="romance">Romance</option>
+                </select>
+                <label for="period">Time Period:</label>
+                <select id="period">
+                    <option value="2020s">2020s</option>
+                    <option value="2010s">2010s</option>
+                    <option value="2000s">2000s</option>
+                    <option value="90s">90s</option>
+                    <option value="80s">80s</option>
+                </select>
+                <input type="submit" value="Get Matched Movie">
+            </form>
+        </div>
+    </main>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script src="../js/movie-match.js"></script>
+    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.error("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.error('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.error('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.error('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script>
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <footer style="margin-top: 0">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/movie-timeline.html b/MovieVerse-Mobile/platforms/ios/www/html/movie-timeline.html
new file mode 100644
index 00000000..c59d916d
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/movie-timeline.html
@@ -0,0 +1,806 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Timeline - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/actor-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html">
+    <meta property="og:title" content="Movie Timeline - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Timeline - The MovieVerse">
+    <meta name="twitter:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #search {
+            margin-top: -1px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        #footer {
+            margin-top: 700px
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #footer {
+                margin-top: 20px;
+            }
+        }
+    </style>
+
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .load-more-container {
+            width: 100%;
+            text-align: center;
+            margin-top: 20px;
+        }
+        .load-more-container button {
+            margin: 10px auto;
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            transition: background-color 0.3s ease;
+        }
+        .load-more-container button:hover {
+            background-color: #ff8623;
+        }
+        #ad-container2 {
+            display: none;
+        }
+        @media (max-width: 768px) {
+            #ad-container2 {
+                display: block;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -20px; margin-top: -5px" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="timeline-container" style="margin-bottom: 300px">
+        <div class="center-container">
+            <div style="font-weight: bold; font-size: 27px" id="select-text">Select a Period</div>
+            <div class="year-input-container">
+                <input type="number" id="start-year" class="year-input" title="Enter any year from 1900 until now" placeholder="Start Year" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
+                <input type="number" id="end-year" class="year-input" placeholder="End Year" title="Enter any year from 1900 until now" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
+                <button id="load-movies" onclick="updateMovies()" title="Get Movies in the Chosen Period!">Get Movies in This Period</button>
+            </div>
+            <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
+        </div>
+        <div class="center-container1" id="center-container1">
+            <main id="results" style="scroll-behavior: smooth">
+                <!-- Movies will be dynamically loaded here -->
+            </main>
+        </div>
+    </div>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 255px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 220px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 185px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 150px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 115px; z-index: 10012; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 10012">Back To Top</button>
+
+    <script src="../js/movie-timeline.js"></script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" id="back-top">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('back-top').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+    </script>
+
+    <footer id="footer">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+</body>
+
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/movies-list.hbs b/MovieVerse-Mobile/platforms/ios/www/html/movies-list.hbs
new file mode 100644
index 00000000..8bdfc1c8
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/movies-list.hbs
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Movies List</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    .movie {
+      margin-bottom: 20px;
+    }
+    .movie-title {
+      font-weight: bold;
+    }
+    .movie-year {
+      font-style: italic;
+    }
+    .movie-description {
+      margin-top: 5px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Movies List</h1>
+  {{#each movies}}
+    <div class="movie">
+      <div class="movie-title">{{this.title}}</div>
+      <div class="movie-year">Released in: {{this.year}}</div>
+      <div class="movie-description">{{this.description}}</div>
+    </div>
+  {{/each}}
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/notifications.html b/MovieVerse-Mobile/platforms/ios/www/html/notifications.html
new file mode 100644
index 00000000..5aeeaee8
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/notifications.html
@@ -0,0 +1,1329 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Notifications - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Notifications - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations.">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html" />
+    <meta property="og:site_name" content="Notifications - The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Notifications - The MovieVerse">
+    <meta name="twitter:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations." />
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0 !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        main {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: flex-start;
+            gap: 20px;
+            padding: 20px;
+        }
+        section {
+            flex: 1 1 calc(33% - 40px);
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 100%;
+        }
+        @media (max-width: 1200px) {
+            section {
+                flex: 1 1 calc(50% - 40px);
+            }
+        }
+        @media (max-width: 768px) {
+            main {
+                flex-direction: column;
+            }
+            section {
+                flex-basis: 100%;
+            }
+        }
+        ul {
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            list-style-type: none;
+        }
+        li {
+            width: 100%;
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #ecf0f1;
+            border-left: 5px solid #2980b9;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        h2 {
+            margin-bottom: 10px;
+        }
+        li:hover {
+            background-color: #e1e3e4;
+            cursor: pointer;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #movie-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #actor-link {
+            color: black;
+        }
+        #director-link {
+            color: black;
+        }
+        #actor-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #director-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: 0 !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li style="background: none; border: none; box-shadow: none"><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#newFeatures">New Features</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#newReleases">New Releases</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#tipsTricks">Tips & Tricks</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#popularActors">Popular Actors</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#popularDirectors">Popular Directors</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="sign-in.html">Sign In</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="user-profile.html">Profile</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="feedback.html">Submit Feedback</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main>
+        <section id="newFeatures">
+            <h2 style="cursor: pointer">New Features</h2>
+            <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
+            <ul>
+                <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Improved Chatbot:</strong> Get personalized movie recommendations and insightful answers to your questions with our smarter chatbot.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Chat Feature:</strong> Join the conversation! Chat with fellow film fans in real-time to share your passion and discover new favorites.</li>
+                <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>Improved Recommendations:</strong>  Unlock a world of movies tailored just for you. Our enhanced engine suggests films based on your unique tastes and viewing habits.</li>
+                <li><i style="margin-right: 3px" class="fas fa-users"></i> <strong>User Profile Search:</strong>  Connect with your friends and discover their movie tastes. Search for user profiles and see what they're watching.</li>
+                <li><i style="margin-right: 3px" class="fas fa-user-plus"></i> <strong>Follow Other Users:</strong> Never miss a beat! Follow your friends to stay up-to-date on their latest movie discoveries and recommendations.</li>
+                <li><i style="margin-right: 3px" class="fas fa-share-alt"></i> <strong>Share Watch Lists:</strong> Spread the cinematic love! Create and share custom watch lists with friends and family, showcasing your curated collection of must-see films.</li>
+            </ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="newReleases">
+            <h2 style="cursor: pointer">New Releases</h2>
+            <h3>Since Your Last Visit</h3>
+            <ul id="releasesSinceLastVisit"></ul>
+            <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
+            <ul id="releasesThisMonth"></ul>
+            <h3 style="margin-top: 35px">Since the Beginning of This Year</h3>
+            <ul id="releasesThisYear"></ul>
+            <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
+            <p style="color: black; margin-top: 0"> You can always view more recommended movies in your recommended list in <a id="githubLink1" href="../../index.html#recommendedDIV">your recommended movies section</a>.</p>
+            <ul id="recommendedReleases"></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="tipsTricks">
+            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
+            <ul>
+                <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Engaging with the Community:</strong> Dive into vibrant discussions, share your insights, and connect with other film enthusiasts.</li>
+                <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Exploring Indie Films:</strong>  Unearth hidden cinematic treasures and broaden your horizons with our curated selection of independent films.</li>
+                <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>Rating Movies:</strong> Your voice matters! Share your opinions by rating movies and TV shows, helping us refine our recommendations for you and others.</li>
+                <li><i style="margin-right: 3px" class="fas fa-robot"></i> <strong>Chatting with the Chatbot:</strong> Need a movie suggestion or want to test your film trivia knowledge? Our friendly chatbot is always ready to entertain and inform.</li>
+                <li><i style="margin-right: 3px" class="fas fa-cloud"></i> <strong>Cloud Syncing:</strong> Your movie preferences follow you wherever you go. Enjoy seamless access to your watchlists and favorites across all your devices.</li>
+            </ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="popularActors">
+            <h2 style="cursor: pointer">Popular Actors</h2>
+            <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
+            <ul></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="popularDirectors">
+            <h2 style="cursor: pointer">Popular Directors</h2>
+            <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
+            <ul></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+    </main>
+    <script src="../js/notifications.js"></script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        document.getElementById('newFeatures').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('newReleases').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularActors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const updateDateElements = document.querySelectorAll('.updateDate');
+            const today = new Date();
+            const options = { year: 'numeric', month: 'long', day: 'numeric' };
+            const formattedDate = today.toLocaleDateString('en-US', options);
+            const formattedDateISO = today.toISOString().split('T')[0];
+
+            updateDateElements.forEach(element => {
+                element.textContent = formattedDate;
+                element.setAttribute('datetime', formattedDateISO);
+            });
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script>
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        let today = new Date();
+        today.setFullYear(today.getFullYear() - 18);
+        let year = today.getFullYear();
+        let month = (today.getMonth() + 1).toString().padStart(2, '0');
+        let day = today.getDate().toString().padStart(2, '0');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+
+    <footer style="margin-top: 20px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/offline.html b/MovieVerse-Mobile/platforms/ios/www/html/offline.html
new file mode 100644
index 00000000..3ab9890e
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/offline.html
@@ -0,0 +1,798 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>You're Offline - The MovieVerse</title>
+    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/offline.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:title" content="You're Offline - The MovieVerse">
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/offline.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="You're Offline - The MovieVerse">
+    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body class="movie-details-body">
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="center-text" style="padding: 150px;">
+        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">You're Offline</div>
+        <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
+        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 500px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/privacy-policy.html b/MovieVerse-Mobile/platforms/ios/www/html/privacy-policy.html
new file mode 100644
index 00000000..f40bf2dc
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/privacy-policy.html
@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Privacy Policy - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta property="og:title" content="Privacy Policy - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Privacy Policy - The MovieVerse">
+    <meta name="twitter:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <meta name="theme-color" content="#7378c5">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        .content-area {
+            margin: 0 auto;
+            max-width: 800px;
+            padding: 0;
+            text-align: center;
+        }
+        #linkWeb {
+            color: white;
+        }
+        #linkWeb:hover {
+            color: #ff8623;
+            text-decoration: underline;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+                margin-top: 10px;
+            }
+        }
+        @media (min-width: 900px) {
+            header {
+                margin-top: 4px !important;
+            }
+        }
+        header {
+            margin-top: -5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        h2 {
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+            #form1 {
+                margin-top: 5px !important;
+            }
+        }
+        #form1 {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -20px; margin-top: -5px !important;" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='https://movie-verse.com'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#introduction">Introduction</a></li>
+            <li><a href="#consent">Consent</a></li>
+            <li><a href="#subheading2">Information We Collect</a></li>
+            <li><a href="#subheading">How We Use Your Information</a></li>
+            <li><a href="#subheading3">Log Files</a></li>
+            <li><a href="#subheading4">Cookies and Web Beacons</a></li>
+            <li><a href="terms-of-service.html">Terms of Service</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main class="content-area" style="text-align: center">
+        <div style="text-align: center; width: 90%; margin-top: 25px">
+            <div style="font-weight: bold; font-size: 30px" id="privacy-header">Privacy Policy</div>
+        </div>
+        <div id="introduction" style="text-align: center; width: 90%">
+            <h2 style="cursor: pointer">Introduction</h2>
+            <p>At The MovieVerse, accessible from <a id="linkWeb" href="https://movie-verse.com">https://movie-verse.com</a>, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by The MovieVerse and how we use it.</p>
+        </div>
+        <div id="consent" style="text-align: center; width: 90%">
+            <h2 style="cursor: pointer">Consent</h2>
+            <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms. For our Terms and Conditions, please visit the <a id="linkWeb" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">Terms and Conditions</a> page.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading2">
+            <h2 style="cursor: pointer">Information we collect</h2>
+            <p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
+            <p>If you contact us directly, we may receive additional information about you such as your name, email address, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
+        </div>
+        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading">
+            <h2 style="cursor: pointer">How we use your information</h2>
+            <p>We use the information we collect in various ways, including to:</p>
+            <ul style="color: white; list-style: none; width: 90%">
+                <li>1. Provide, operate, and maintain our website</li>
+                <li>2. Improve, personalize, and expand our website</li>
+                <li>3. Understand and analyze how you use our website</li>
+                <li>4. Develop new products, services, features, and functionality</li>
+                <li>5. Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
+                <li>6. Send you emails</li>
+                <li>7. Find and prevent fraud</li>
+                <li>8. Log Files</li>
+            </ul>
+        </div>
+        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading3">
+            <h2 style="cursor: pointer">Log Files</h2>
+            <p>The MovieVerse follows a standard procedure of using log files.</p>
+            <p>These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics.</p>
+            <p>These are not linked to any information that is personally identifiable.</p>
+            <p>The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
+        </div>
+        <div style="text-align: center; margin-bottom: 300px; width: 90%; cursor: pointer" id="subheading4">
+            <h2 style="cursor: pointer">Cookies and Web Beacons</h2>
+            <p>Like any other website, The MovieVerse uses 'cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited.</p>
+            <p>The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
+            <p>We may analyze user behavior through the use of cookies and web beacons with Google Analytics. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. We partner with Google to use the data collected to track and monitor the use of our website.</p>
+            <p>For more general information on cookies, please read <a id="linkWeb" href="https://www.cookieconsent.com/what-are-cookies/">"What Are Cookies"</a>.</p>
+        </div>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script src="../js/privacy-policy.js"></script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/profile.ejs b/MovieVerse-Mobile/platforms/ios/www/html/profile.ejs
new file mode 100644
index 00000000..9fd52920
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/profile.ejs
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Profile</title>
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/profile">Profile</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <section class="profile-container">
+        <h1>User Profile</h1>
+        <% if (user) { %>
+            <div class="profile-info">
+                <img src="<%= user.avatar %>" alt="Profile Avatar" class="profile-avatar">
+                <h2><%= user.name %></h2>
+                <p>Email: <%= user.email %></p>
+                <p>Location: <%= user.location %></p>
+                <p>Member since: <%= user.createdAt %></p>
+                <p>Favorite Movies:</p>
+                <ul>
+                    <% user.favoriteMovies.forEach(movie => { %>
+                        <li><%= movie.title %></li>
+                    <% }) %>
+                </ul>
+                <p>Favorite Genres:</p>
+                <ul>
+                    <% user.favoriteGenres.forEach(genre => { %>
+                        <li><%= genre %></li>
+                    <% }) %>
+                </ul>
+                <p>Favorite Actors:</p>
+                <ul>
+                    <% user.favoriteActors.forEach(actor => { %>
+                        <li><%= actor.name %></li>
+                    <% }) %>
+                </ul>
+                <p>
+                    <a href="/profile/edit">Edit Profile</a>
+                </p>
+            </div>
+        <% } else { %>
+            <p>User not found.</p>
+        <% } %>
+    </section>
+</main>
+<footer>
+    <p>&copy; 2024 The MovieVerse. All rights reserved.</p>
+</footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/reset-password.html b/MovieVerse-Mobile/platforms/ios/www/html/reset-password.html
new file mode 100644
index 00000000..3727e104
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/reset-password.html
@@ -0,0 +1,1097 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Reset Password - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html">
+    <meta property="og:title" content="Reset Password - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Reset Password - The MovieVerse">
+    <meta name="twitter:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        .password-reset-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+
+        .password-reset-form-container input[type="email"],
+        .password-reset-form-container input[type="password"],
+        .password-reset-form-container input[type="text"],
+        .password-reset-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+
+        #local-time {
+            transform: translateX(12%);
+        }
+
+        .password-reset-form-container button[type="submit"],
+        .password-reset-form-container button[type="button"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .password-reset-form-container button:hover {
+            background-color: #22254b;
+            color: white;
+        }
+
+        .password-reset-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .password-reset-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+
+        #my-heading {
+            margin-top: 24px !important;
+        }
+
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <div class="password-reset-form-container" id="password-reset-form-container" style="margin-bottom: 300px">
+        <form id="resetPasswordForm">
+            <h2>Reset Password</h2>
+            <p style="color: black">Forgot your password? No worries! Enter your email to verify your account and reset your password.</p>
+            <input type="email" id="resetEmail" placeholder="Enter your email" required>
+            <button type="submit">Verify Account</button>
+            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
+        </form>
+        <div id="newPasswordFields" style="display: none;">
+            <p style="color: black">Great news! Your account has been verified. Now, enter and confirm your new password below.</p>
+            <input type="password" id="newPassword" placeholder="New Password" required>
+            <input type="password" id="confirmNewPassword" placeholder="Confirm New Password" required>
+            <div style="margin-top: 10px; margin-bottom: 10px">
+                <label>
+                    <input type="checkbox" id="togglePassword"> Show Password
+                </label>
+            </div>
+            <button type="button" id="updatePasswordButton">Update Password</button>
+        </div>
+    </div>
+
+    <footer style="margin-top: 750px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <script src="../js/reset-password.js" type="module"></script>
+
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('newPassword');
+            const confirmPasswordInput = document.getElementById('confirmNewPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+                confirmPasswordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+                confirmPasswordInput.type = 'password';
+            }
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+    </script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/search.html b/MovieVerse-Mobile/platforms/ios/www/html/search.html
new file mode 100644
index 00000000..683f51f8
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/search.html
@@ -0,0 +1,921 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
+<head>
+    <meta charset="UTF-8">
+    <title>Search Results - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:title" content="Search Results - The MovieVerse">
+    <meta property="og:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/search.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/search.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Search Results - The MovieVerse">
+    <meta name="twitter:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <script src="../js/search.js"></script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #local-time {
+            margin-left: 5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #ad-container {
+            display: block !important;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px" class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <main id="movie-match-main" style="margin-top: 10px; margin-bottom: 150px">
+        <h2 id="search-results-label">Search Results</h2>
+        <div class="category-buttons">
+            <button data-category="movie" onclick="showResults('movie')">Movies</button>
+            <button data-category="tv" onclick="showResults('tv')">TV Series</button>
+            <button data-category="person" onclick="showResults('person')">People</button>
+        </div>
+        <button id="toggle-filters-btn">Filter & Sort Results</button>
+        <!-- Filters for Movies -->
+        <div id="movie-tv-filters" style="display: none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="genre-filter">Genre:</label>
+            <select id="genre-filter">
+                <option value="">Select Genre</option>
+                <!-- Populated with genres -->
+            </select>
+            <label for="language-filter">Language:</label>
+            <select id="language-filter">
+                <option value="">Select Language</option>
+            </select>
+            <label for="year-filter">Year:</label>
+            <input type="number" id="year-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
+            <label style="vertical-align: center" for="rating-filter">Rating:</label>
+            <input type="range" id="rating-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
+            <span id="rating-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-movie"><strong>Sort by:</strong></label>
+            <select id="sort-movie" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
+        </div>
+        <!-- Filters for TV Series -->
+        <div id="tv-filters" style="display: none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="genre-tv-filter">Genre:</label>
+            <select id="genre-tv-filter">
+                <option value="">Select Genre</option>
+                <!-- Populated with genres -->
+            </select>
+            <label for="language-tv-filter">Language:</label>
+            <select id="language-tv-filter">
+                <option value="">Select Language</option>
+            </select>
+            <label for="year-tv-filter">Year:</label>
+            <input type="number" id="year-tv-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
+            <label style="vertical-align: center" for="rating-tv-filter">Rating:</label>
+            <input type="range" id="rating-tv-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
+            <span id="rating-tv-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-tv"><strong>Sort by:</strong></label>
+            <select id="sort-tv" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
+        </div>
+        <!-- Filters for People -->
+        <div id="people-filters" style="display:none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="profession-filter">Profession:</label>
+            <select id="profession-filter">
+                <option value="">Select Profession</option>
+                <option value="Acting">Acting</option>
+                <option value="Directing">Directing</option>
+            </select>
+            <label for="gender-filter">Gender:</label>
+            <select id="gender-filter">
+                <option value="">Select Gender</option>
+                <option value="2">Male</option>
+                <option value="1">Female</option>
+            </select>
+            <label for="popularity-filter">Popularity Score:</label>
+            <input type="range" id="popularity-filter" min="0" max="100" step="1" value="5" title="Popularity" />
+            <span id="popularity-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-people"><strong>Sort by:</strong></label>
+            <select id="sort-people" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+            </select>
+        </div>
+        <div id="movie-match-container1" class="movie-match-container1">
+            <main id="results"></main>
+        </div>
+    </main>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" style="bottom: 90px; right: 10px; z-index: 10012" title="Back to top">Back to Top</button>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 10012" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w300${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/settings.html b/MovieVerse-Mobile/platforms/ios/www/html/settings.html
new file mode 100644
index 00000000..3780f1f0
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/settings.html
@@ -0,0 +1,1231 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>App Settings - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/settings.html">
+    <meta property="og:title" content="App Settings - The MovieVerse">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/settings.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.webp"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="App Settings - The MovieVerse">
+    <meta name="twitter:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.webp"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .settings-container {
+            text-align: center;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .settings-section {
+            margin-bottom: 30px;
+            width: 80%;
+            max-width: 500px;
+        }
+        .settings-section select,
+        .settings-section input[type="color"] {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: 2px solid #7378c5;
+            background-color: #22254b;
+            color: white;
+            font-size: 16px;
+            margin-top: 10px;
+        }
+        .settings-section h2 {
+            color: #ff8623;
+            margin-bottom: 10px;
+        }
+        .settings-section label {
+            font-size: 20px;
+            color: #ff8623;
+            display: block;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #reset-button {
+            display: block;
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            font-size: 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            margin: 20px auto;
+        }
+        #reset-button:hover {
+            background-color: #7378c5;
+            transition: background-color 0.3s ease;
+        }
+        #search-results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            margin-left: 25px;
+        }
+        #search-title {
+            margin: 0;
+        }
+        .button-group button {
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            font-size: 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        .button-group button:hover {
+            background-color: #7378c5;
+            transition: background-color 0.3s ease;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            #heading {
+                margin-top: -5px;
+            }
+            #my-heading {
+                margin-top: 25px !important;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .image-container {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+            background-color: #7378c5;
+            text-align: center;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            cursor: pointer;
+        }
+        .image-container:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        .image-container img {
+            margin-left: 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: transform 0.2s;
+        }
+        .image-container img:hover {
+            transform: scale(1.1);
+        }
+        .image-container input[type="checkbox"] {
+            margin-right: 10px;
+        }
+        .image-name {
+            margin-left: 10px;
+            font-size: 1rem;
+            color: #fff;
+        }
+        #delete-selected-images-btn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            display: inline-block;
+            font: inherit;
+            margin: 20px auto;
+        }
+        #delete-selected-images-btn:hover {
+            background-color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="heading">
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 5px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <main id="settings-container" class="settings-container" style="margin-bottom: 50px">
+        <!-- Background Setting -->
+        <div class="settings-section">
+            <h2>Change App Background</h2>
+            <select id="background-select" style="font: inherit">
+                <option style="font: inherit" value="../../images/universe-1.webp">Default</option>
+                <option style="font: inherit" value="../../images/universe-2.webp">Universe 1</option>
+                <option style="font: inherit" value="../../images/universe-22.webp">Universe 2</option>
+                <option style="font: inherit" value="../../images/universe-3.webp">Universe 3</option>
+                <option style="font: inherit" value="../../images/universe-4.webp">Universe 4</option>
+                <option style="font: inherit" value="../../images/universe-5.webp">Universe 5</option>
+                <option style="font: inherit" value="../../images/universe-6.webp">Universe 6</option>
+                <option style="font: inherit" value="../../images/universe-7.webp">Universe 7</option>
+                <option style="font: inherit" value="../../images/universe-8.webp">Universe 8</option>
+                <option style="font: inherit" value="../../images/universe-9.webp">Universe 9</option>
+                <option style="font: inherit" value="../../images/universe-10.webp">Universe 10</option>
+                <option style="font: inherit" value="../../images/universe-11.webp">Universe 11</option>
+                <option style="font: inherit" value="../../images/universe-12.webp">Universe 12</option>
+                <option style="font: inherit" value="../../images/universe-13.webp">Universe 13</option>
+                <option style="font: inherit" value="../../images/universe-14.webp">Universe 14</option>
+                <option style="font: inherit" value="../../images/universe-15.webp">Universe 15</option>
+                <option style="font: inherit" value="../../images/universe-16.webp">Universe 16</option>
+                <option style="font: inherit" value="../../images/universe-17.webp">Universe 17</option>
+                <option style="font: inherit" value="../../images/universe-18.webp">Universe 18</option>
+                <option style="font: inherit" value="../../images/universe-19.webp">Universe 19</option>
+                <option style="font: inherit" value="../../images/universe-20.webp">Universe 20</option>
+                <option style="font: inherit" value="../../images/universe-21.webp">Universe 21</option>
+                <option style="font: inherit" value="../../images/universe.webp">Universe 22</option>
+                <option style="font: inherit" value="../../images/universe-23.webp">Universe 23</option>
+                <option style="font: inherit" value="../../images/black.webp">Black</option>
+                <option style="font: inherit" value="../../images/grey.webp">Grey</option>
+                <option style="font: inherit" value="../../images/blue.webp">Blue</option>
+                <option style="font: inherit" value="../../images/silver.webp">Silver</option>
+                <option style="font: inherit" value="../../images/gold.webp">Gold</option>
+                <option style="font: inherit" value="../../images/rose.webp">Rose</option>
+                <option style="font: inherit" value="../../images/pink.webp">Pink</option>
+                <option style="font: inherit" value="../../images/red.webp">Red</option>
+                <option style="font: inherit" value="../../images/green.webp">Green</option>
+                <option style="font: inherit" value="../../images/brown.webp">Brown</option>
+                <option style="font: inherit" value="../../images/purple.webp">Purple</option>
+                <option style="font: inherit" value="../../images/orange.webp">Orange</option>
+                <option style="font: inherit" value="../../images/yellow.webp">Light Yellow</option>
+            </select>
+        </div>
+        <div class="settings-section">
+            <h2>Upload A Custom Background</h2>
+            <input type="file" id="custom-bg-upload" accept="image/*" style="margin-bottom: 10px; padding-left: 10px; font: inherit">
+            <input type="text" id="custom-bg-name" placeholder="Enter image name..." style="margin-bottom: 10px; font: inherit">
+            <div class="button-group">
+                <button id="upload-bg-btn" style="font: inherit">Upload</button>
+                <button id="delete-uploaded-btn" style="font: inherit">Delete Uploaded Images</button>
+            </div>
+        </div>
+        <div class="settings-section" id="delete-images-section" style="display: none;">
+            <h2>Select Images to Delete</h2>
+            <div id="custom-images-container"></div>
+            <button id="delete-selected-images-btn">Delete Selected Images</button>
+        </div>
+        <!-- Text Color Setting -->
+        <div class="settings-section">
+            <h2>Change Text Color</h2>
+            <label for="text-color-input">Text Color:</label>
+            <input type="color" style="min-height: 50px" id="text-color-input">
+        </div>
+        <!-- Font Size Setting -->
+        <div class="settings-section">
+            <h2>Change Font Size</h2>
+            <label style="font: inherit" for="font-size-select">Font Size:</label>
+            <select style="font: inherit" id="font-size-select">
+                <option style="font: inherit" value="small">Small</option>
+                <option style="font: inherit" value="medium" selected>Medium</option>
+                <option style="font: inherit" value="large">Large</option>
+            </select>
+        </div>
+        <button style="font: inherit" id="reset-button">Reset to Defaults</button>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 200px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/settings.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, span, div, button, input, select, textarea').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/sign-in.html b/MovieVerse-Mobile/platforms/ios/www/html/sign-in.html
new file mode 100644
index 00000000..40df0ef7
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/sign-in.html
@@ -0,0 +1,1077 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Sign In - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Sign In - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Sign In - The MovieVerse">
+    <meta name="twitter:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+        #local-time {
+            transform: translateX(12%);
+        }
+        .sign-in-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .sign-in-form-container h1 {
+            color: black;
+        }
+        .sign-in-form-container p {
+            color: black;
+        }
+        .sign-in-form-container input[type="email"],
+        .sign-in-form-container input[type="password"],
+        .sign-in-form-container input[type="text"],
+        .sign-in-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .sign-in-form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .sign-in-form-container button[type="button"] {
+            background-color: #f0f0f0;
+            color: #333;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #createAccountBtn:hover {
+            background-color: #d3d3d3;
+            color: #1B1B1B;
+        }
+        .sign-in-form-container button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .sign-in-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .sign-in-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+        header {
+            margin-top: -5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="sign-in-form-container" style="margin-bottom: 390px">
+        <form id="signInForm">
+            <h2>Sign In</h2>
+            <p>Sign in to save your stats, watchlists, get personalized movie recommendation, join our community, and more!</p>
+            <input type="email" id="signInEmail" placeholder="Email" required>
+            <input type="password" id="signInPassword" placeholder="Password" required>
+            <label style="margin-top: 10px; margin-bottom: 10px">
+                <input type="checkbox" id="togglePassword"> Show Password
+            </label>
+            <button type="submit">Sign In</button>
+            <button type="button" id="createAccountBtn">Create an Account</button>
+            <p>Forgot password? Click <a style="text-decoration: underline" id="githubLink1" href="reset-password.html">below</a> to reset it.</p>
+            <button type="button" id="resetPasswordBtn" onclick="window.location.href='reset-password.html'">Reset Password</button>
+        </form>
+    </div>
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('signInPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/sign-in.js" type="module"></script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/support.html b/MovieVerse-Mobile/platforms/ios/www/html/support.html
new file mode 100644
index 00000000..a02e4a31
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/support.html
@@ -0,0 +1,1101 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Support - The MovieVerse</title>
+    <meta name="description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/support.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/support.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta property="og:title" content="Support - The MovieVerse">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Support - The MovieVerse">
+    <meta name="twitter:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .form-container h1 {
+            color: #ff8623;
+        }
+        .form-container input,
+        .form-container textarea,
+        .form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .form-container button[type="submit"]:hover {
+            background-color: #ff8623;
+        }
+        .form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #supportBtn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            margin-top: 20px;
+        }
+        #supportBtn:hover {
+            background-color: #ff8623;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        @media (min-width: 900px) {
+            #my-heading {
+                margin-top: 15px !important;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body class="movie-details-body">
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="form-container">
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Contact Support</div>
+        <p style="color: black">Have a question or need help? Contact us and we'll take a look at your request as soon as possible.</p>
+        <form action="https://formspree.io/f/xdoqzzao" method="POST">
+            <input type="text" id="name" name="name" placeholder="Your Name" required>
+            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
+            <textarea id="message" name="message" placeholder="Your Message" required></textarea>
+            <button type="submit">Send Message</button>
+            <p style="color: black">Have a feedback for us? Or any suggestions to improve our app? Click the button below to be redirected to the feedback page.</p>
+        </form>
+        <button id="supportBtn" onclick="window.location.href='feedback.html'" title="Submit a feedback">Submit Feedback</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        function updateClock() {
+            var now = new Date();
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            hours = hours < 10 ? '0' + hours : hours;
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            var timeString = hours + ':' + minutes;
+            document.getElementById('clock').innerHTML = timeString;
+        }
+
+        setInterval(updateClock, 1000);
+        window.onload = updateClock;
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+
+    <footer style="margin-top: 400px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/terms-of-service.html b/MovieVerse-Mobile/platforms/ios/www/html/terms-of-service.html
new file mode 100644
index 00000000..23daac13
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/terms-of-service.html
@@ -0,0 +1,399 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Terms of Service - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta property="og:title" content="Terms of Service - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Terms of Service - The MovieVerse">
+    <meta name="twitter:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        .content-area {
+            margin: 0 auto;
+            max-width: 800px;
+            padding: 0;
+            text-align: center;
+        }
+        #mail {
+            color: white;
+        }
+        #mail:hover {
+            color: #ff8623;
+            text-decoration: underline;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            header {
+                margin-top: -5px;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        h2 {
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#agreement">Agreement to Terms</a></li>
+            <li><a href="#consent">Changes to Terms</a></li>
+            <li><a href="#subheading2">Use of Service</a></li>
+            <li><a href="#subheading">Content</a></li>
+            <li><a href="#subheading3">Ads</a></li>
+            <li><a href="#subheading4">Accounts</a></li>
+            <li><a href="#subheading5">Intellectual Property</a></li>
+            <li><a href="#subheading6">Links To Other Web Sites</a></li>
+            <li><a href="#subheading7">Termination</a></li>
+            <li><a href="#subheading8">Disclaimer</a></li>
+            <li><a href="#subheading9">Governing Law</a></li>
+            <li><a href="#subheading10">Contact Us</a></li>
+            <li><a href="privacy-policy.html">Privacy Policy</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main class="content-area">
+        <div style="text-align: center; width: 90%">
+            <div style="font-weight: bold; font-size: 28px; margin-top: 10px; color: #ff8623" id="tos-header">Terms of Service</div>
+        </div>
+        <div style="text-align: center; width: 90%" id="agreement">
+            <h2 style="cursor: pointer">Agreement to Terms</h2>
+            <p>By using The MovieVerse, you agree to be bound by these terms. If you disagree with any part of the terms, then you do not have permission to access the service.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="consent">
+            <h2 style="cursor: pointer">Changes to Terms</h2>
+            <p>We reserve the right to modify or replace these Terms at any time at our sole discretion. We will try to provide at least 30 days' notice prior to any new terms taking effect.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading2">
+            <h2 style="cursor: pointer">Use of Service</h2>
+            <p>The MovieVerse is provided on an "AS IS" and "AS AVAILABLE" basis. The service is for personal, non-commercial use only.</p>
+            <p>You may not use the service for any illegal or unauthorized purpose. You must not, in the use of the service, violate any laws in your jurisdiction.</p>
+            <p>You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the service, use of the service, or access to the service without express written permission by us.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading">
+            <h2 style="cursor: pointer">Content</h2>
+            <p>Content found on or through this Service are the property of The MovieVerse or used with permission. You may not distribute, modify, transmit, reuse, download, repost, copy, or use said Content, whether in whole or in part, for commercial purposes or for personal gain, without express advance written permission from us.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading3">
+            <h2 style="cursor: pointer">Ads</h2>
+            <p>During use of the Service, you may enter into correspondence with or participate in promotions of advertisers or sponsors showing their goods or services through the Service. Any such activity, and any terms, conditions, warranties or representations associated with such activity, is solely between you and the applicable third-party.</p>
+            <p>We display ads on the Service to help us keep our servers and databases running and free for everyone. We're committed to placing non-intrusive ads only, which means no pop-ups, no auto-playing videos, and no ads that interfere with your experience on the site.</p>
+            <p>If you encounter any ads that are inappropriate, misleading, or intrusive, please let us know by contacting us at using the Feedback form <a style="color: white" href="feedback.html">here</a>.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading4">
+            <h2 style="cursor: pointer">Accounts</h2>
+            <p>When you create an account with us, you guarantee that the information you provide us is accurate, complete, and current at all times. Inaccurate, incomplete, or obsolete information may result in the immediate termination of your account on the Service.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading5">
+            <h2 style="cursor: pointer">Intellectual Property</h2>
+            <p>The Service and its original content, features, and functionality are and will remain the exclusive property of The MovieVerse and its licensors.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading6">
+            <h2 style="cursor: pointer">Links To Other Web Sites</h2>
+            <p>Our Service may contain links to third-party web sites or services that are not owned or controlled by The MovieVerse. We have no control over, and assume no responsibility for the content, privacy policies, or practices of any third-party web sites or services.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading7">
+            <h2 style="cursor: pointer">Termination</h2>
+            <p>We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of the Terms.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading8">
+            <h2 style="cursor: pointer">Disclaimer</h2>
+            <p>Your use of the Service is at your sole risk. The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading9">
+            <h2 style="cursor: pointer">Governing Law</h2>
+            <p>These Terms shall be governed and construed in accordance with the laws of the country where The MovieVerse is based (the United States of America), without regard to its conflict of law provisions.</p>
+            <p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
+        </div>
+        <div style="text-align: center; width: 90%; margin-bottom: 300px" id="subheading10">
+            <h2 style="cursor: pointer">Contact Us</h2>
+            <p>If you have any questions about these Terms, please contact us at <a id="mail" href="mailto:info@movie-verse.com">info@movie-verse.com</a>.</p>
+        </div>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script src="../js/terms-of-service.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/trivia.html b/MovieVerse-Mobile/platforms/ios/www/html/trivia.html
new file mode 100644
index 00000000..d2bc5201
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/trivia.html
@@ -0,0 +1,1173 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>MovieVerse Trivia - Test Your Movie Knowledge</title>
+    <link rel="stylesheet" href="../css/trivia.css">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html">
+    <meta property="og:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html" />
+    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
+    <meta name="twitter:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        label {
+            cursor: pointer;
+        }
+        label:hover {
+            color: #f509d9;
+        }
+        #my-heading {
+            margin-top: 25px;
+        }
+        @keyframes dropIn {
+            0% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: dropIn 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 0.5s;
+        }
+        #form {
+            margin-top: 16px;
+        }
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+            #form {
+                margin-top: 0;
+            }
+        }
+        #ad-container1 {
+            display: block;
+        }
+        #githubLink {
+            color: white !important;
+        }
+        #githubLink:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @media (min-width: 768px) {
+            #my-heading {
+                margin-top: 19px;
+            }
+            #form {
+                margin-top: 10px;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-bottom: -50px; margin-top: 9px">
+        <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 215px" class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="#0">Question 1</a></li>
+            <li><a href="#1">Question 2</a></li>
+            <li><a href="#2">Question 3</a></li>
+            <li><a href="#3">Question 4</a></li>
+            <li><a href="#4">Question 5</a></li>
+            <li><a href="#5">Question 6</a></li>
+            <li><a href="#6">Question 7</a></li>
+            <li><a href="#7">Question 8</a></li>
+            <li><a href="#8">Question 9</a></li>
+            <li><a href="#9">Question 10</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <div>
+        <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
+    </div>
+    <div id="result-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Trivia Results</h3>
+                <span class="close-button" title="Close the trivia results modal">&times;</span>
+            </div>
+            <div id="progress-circle" class="progress-circle">
+                <div id="correct-answers"></div>
+            </div>
+            <p id="result-text"></p>
+        </div>
+    </div>
+    <main id="main"></main>
+    <form id="quiz-form" style="margin-bottom: 50px">
+        <div id="quiz-container"></div>
+        <button type="button" id="regenerate-questions" class="button" style="color: black">Get New Questions</button>
+        <button type="submit" id="submit" class="button" style="color: black">Submit Answers</button>
+    </form>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0; color: white">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="color: white; margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/quiz.js" type="module"></script>
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p id="footerP" style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" id="back-top">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+
+        document.getElementById('back-top').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/tv-details.html b/MovieVerse-Mobile/platforms/ios/www/html/tv-details.html
new file mode 100644
index 00000000..6898fd09
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/tv-details.html
@@ -0,0 +1,938 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>TV Series Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/tv-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="TV Series Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="TV Series Details - The MovieVerse">
+    <meta name="twitter:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #rating {
+            color: white !important;
+        }
+        #rating:hover {
+            color: #ff8623 !important;
+        }
+        #favorite-btn:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        .favorited:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #homepage {
+            color: white;
+        }
+        #homepage:hover {
+            color: #ff8623;
+        }
+        #prod-companies {
+            color: white;
+        }
+        #prod-companies:hover {
+            color: #ff8623;
+        }
+        header {
+            margin-top: 9px;
+        }
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            header {
+                margin-top: -5px;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .cast-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+        }
+        .cast-member-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            margin: 5px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .cast-member-image {
+            width: 100%;
+            height: 155px;
+            object-fit: cover !important;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .cast-member-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .cast-member-details {
+            width: 100%;
+        }
+        .cast-member-name, .cast-member-role {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+            white-space: normal;
+            text-align: center;
+        }
+        .similar-tv-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+        }
+        .similar-tv-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .similar-tv-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .similar-tv-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .similar-tv-name {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+        .similar-tv-link {
+            text-decoration: none;
+            color: #333;
+        }
+        #movie-details-container {
+            margin-top: 20px;
+        }
+        @media (max-width: 767px) {
+            #movie-details-container {
+                margin-top: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+    <main id="main" style="margin-left: 35px; height: 0"></main>
+    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px;">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading TV Series Details..." style="width: 25vw; border-radius: 8px" title="Click to view full-size image" />
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
+            <div id="comments-section">
+                <h3>TV Show Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Comments Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This TV Series</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
+                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this TV series">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right" style="position: relative; overflow: hidden">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/tv-details.js"></script>
+    <script src="../js/add-to-tv-favorites.js" type="module"></script>
+    <script type="module">
+        import { toggleFavoriteTVSeries, checkAndUpdateFavoriteButtonTVSeries } from '../js/add-to-tv-favorites.js';
+        document.addEventListener('DOMContentLoaded', () => {
+            const favoriteBtn = document.getElementById('favorite-btn');
+            if (favoriteBtn) {
+                favoriteBtn.addEventListener('click', toggleFavoriteTVSeries);
+            }
+        });
+        checkAndUpdateFavoriteButtonTVSeries();
+    </script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('movie-image').addEventListener('click', function() {
+            let imageUrl = this.src.replace('w780', 'w1280');
+            const modalHtml = `<div id="image-modal" style="z-index: 10000002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                    <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="TV Series Poster" />
+                                    <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                               </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+    <script src="../js/comments-tv.js" type="module"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/user-profile.html b/MovieVerse-Mobile/platforms/ios/www/html/user-profile.html
new file mode 100644
index 00000000..98b22596
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/html/user-profile.html
@@ -0,0 +1,1337 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>User Profile - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="User Profile - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html" />
+    <meta property="og:site_name" content="User Profile - The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="User Profile - The MovieVerse">
+    <meta name="twitter:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        h1 {
+            color: #ff8623;
+        }
+        h1:hover {
+            color: #f509d9;
+            transition: 0.1s ease;
+        }
+        .profile-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .profile-container input[type="text"],
+        .profile-container input[type="date"],
+        .profile-container input[type="file"],
+        .profile-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .profile-container button {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .profile-container button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .profile-container h2, .profile-container p {
+            color: black;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+            padding-top: 60px;
+        }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 5% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 400px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(5px);
+        }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
+        .close:hover,
+        .close:focus {
+            color: #ff8623;
+            text-decoration: none;
+            cursor: pointer;
+        }
+        #editProfileModal {
+            z-index: 1000;
+            width: 100vw !important;
+        }
+        #editProfileModal .modal-content {
+            background-color: #373b69;
+            width: 400px !important;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
+        }
+        #editProfileForm input {
+            font: inherit;
+            border-radius: 8px;
+        }
+        #editProfileForm button {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #editProfileForm button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .modal-header h2 {
+            margin: 0;
+            flex-grow: 1;
+        }
+        .modal-content {
+            padding-bottom: 20px;
+        }
+        .dob-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .dob-container label {
+            margin-right: 10px;
+            margin-top: 10px;
+            color: black;
+        }
+        .dob-container input[type="date"] {
+            flex-grow: 1;
+        }
+        .profile-image-container {
+            position: relative;
+            display: inline-block;
+        }
+        #removeProfileImage {
+            position: absolute;
+            top: 0;
+            background: none;
+            border: none;
+            color: red;
+            font-size: 30px;
+            font-weight: bold;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            margin: 0;
+        }
+        #removeProfileImage:hover {
+            color: #ff8623;
+        }
+        #editProfileForm .modal-content h2 {
+            color: #ff8623;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        #editProfileForm .modal-content label {
+            color: #fff;
+            margin-bottom: 10px;
+            display: block;
+        }
+        #editProfileForm .modal-content input[type="text"],
+        #editProfileForm .modal-content textarea {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            border: 1px solid #7378c5;
+            background-color: #22254b;
+            color: #fff;
+        }
+        #editProfileForm .modal-content button {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            margin: 10px auto;
+            transition: background-color 0.3s ease;
+        }
+        #editProfileForm .modal-content select {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            border: 1px solid #7378c5;
+            background-color: #22254b;
+            color: #fff;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0 !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script src="../js/user-profile.js" type="module"></script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div id="welcomeMessage" style="color: #ff8623; font-weight: bold; font-size: 30px; text-align: center; margin-top: 30px;"></div>
+    <div class="search-users-container" id="search-users-container">
+        <input type="text" id="searchUserInput" placeholder="Search For Any MovieVerse User..." title="Remember that this search is case-sensitive!" />
+        <button id="searchUserBtn">Search</button>
+    </div>
+    <div id="searchUserResults" class="search-results-container"></div>
+    <button id="viewMyProfileBtn" style="margin-top: 20px;">View My Profile</button>
+    <div id="profileContainer" class="profile-container">
+        <div class="profile-image-container">
+            <img id="profileImage" style="cursor: pointer" title="Click to upload a new profile image" onclick="document.getElementById('imageUpload').click()" src="../../images/user-default.png" alt="Profile Image" />
+            <button id="removeProfileImage" title="Click to remove the current profile image" style="display: none;">&times;</button>
+        </div>
+        <input type="file" id="imageUpload" accept="image/*" hidden />
+        <button id="changeProfileImageBtn" onclick="document.getElementById('imageUpload').click()">Change Profile Image</button>
+        <div class="profile-info">
+            <div id="averageDisplays" style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
+                <div class="progress-container" id="container1" style="cursor: pointer">
+                    <svg class="progress-ring" width="100" height="100">
+                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
+                        <circle class="progress-ring__progress" id="avgMovieRatingCircle" cx="50" cy="50" r="40" />
+                        <text class="progress-ring__text" id="avgMovieRatingText" x="50" y="50"></text>
+                    </svg>
+                    <p><strong>Average Movie Rating</strong></p>
+                </div>
+                <div class="progress-container" id="container2" style="cursor: pointer">
+                    <svg class="progress-ring" width="100" height="100">
+                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
+                        <circle class="progress-ring__progress" id="avgTriviaScoreCircle" cx="50" cy="50" r="40" />
+                        <text class="progress-ring__text" id="avgTriviaScoreText" x="50" y="50"></text>
+                    </svg>
+                    <p><strong>Average Movie Trivia Score</strong></p>
+                </div>
+            </div>
+            <p id="usernameDisplay">Username: <span></span></p>
+            <p id="dobDisplay">Date of Birth: <span></span></p>
+            <p id="bioDisplay">Bio: <span></span></p>
+            <p id="favoriteGenresDisplay">Favorite Genres: <span></span></p>
+            <p id="locationDisplay">Location: <span></span></p>
+            <p id="favoriteMovieDisplay">Favorite Movie: <span></span></p>
+            <p id="hobbiesDisplay">Hobbies: <span></span></p>
+            <p id="favoriteActorDisplay"><strong>Favorite Actor:</strong> <span></span></p>
+            <p id="favoriteDirectorDisplay"><strong>Favorite Director:</strong> <span></span></p>
+            <p id="personalQuoteDisplay"><strong>Personal Quote:</strong> <span></span></p>
+            <p id="followingDisplay"><strong>Following:</strong> <span id="followingList"></span></p>
+            <p id="followersDisplay"><strong>Followers:</strong> <span id="followersList"></span></p>
+        </div>
+        <button id="editProfileBtn">Edit Profile Details</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <p id="signInPrompt" style="text-align: center; font-size: 24px; margin-top: 100px;"></p>
+    <div id="editProfileModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header" style="margin-bottom: 20px">
+                <h2>Edit Profile Details</h2>
+                <span class="close" onclick="closeModal()">&times;</span>
+            </div>
+            <form id="editProfileForm">
+                <div style="text-align: center">
+                    <label for="editUsername" style="color: white">Username:</label>
+                    <input type="text" id="editUsername" placeholder="Username">
+                </div>
+                <div style="text-align: center">
+                    <label for="editDob" style="color: white">Date of Birth:</label>
+                    <input type="date" id="editDob" style="padding-left: 5px; width: 100%" placeholder="Date of Birth" title="Click to select your date of birth"/>
+                </div>
+                <div style="text-align: center; margin-top: 20px">
+                    <label for="editBio" style="color: white">Bio:</label>
+                    <input type="text" id="editBio" placeholder="Bio">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteGenres" style="color: white">Favorite Genres:</label>
+                    <input type="text" id="editFavoriteGenres" placeholder="Favorite Genres">
+                </div>
+                <div style="text-align: center">
+                    <label for="editLocation" style="color: white">Location:</label>
+                    <input type="text" id="editLocation" placeholder="Location">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteMovie" style="color: white">Favorite Movie:</label>
+                    <input type="text" id="editFavoriteMovie" placeholder="Favorite Movie">
+                </div>
+                <div style="text-align: center">
+                    <label for="editHobbies" style="color: white">Hobbies:</label>
+                    <input type="text" id="editHobbies" placeholder="Hobbies">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteActor" style="color: white">Favorite Actor:</label>
+                    <input type="text" id="editFavoriteActor" placeholder="Favorite Actor">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteDirector" style="color: white">Favorite Director:</label>
+                    <input type="text" id="editFavoriteDirector" placeholder="Favorite Director">
+                </div>
+                <div style="text-align: center">
+                    <label for="editPersonalQuote" style="color: white">Personal Quote:</label>
+                    <input type="text" id="editPersonalQuote" placeholder="Personal Quote">
+                </div>
+                <button type="button" id="saveChanges">Save Changes</button>
+                <button type="button" id="cancelEdit" onclick="closeModal()">Cancel</button>
+            </form>
+        </div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        let today = new Date();
+        today.setFullYear(today.getFullYear() - 18);
+        let year = today.getFullYear();
+        let month = (today.getMonth() + 1).toString().padStart(2, '0');
+        let day = today.getDate().toString().padStart(2, '0');
+        let dateMinus18Years = `${year}-${month}-${day}`;
+        document.getElementById('editDob').value = dateMinus18Years;
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+    <footer style="margin-top: 800px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/index.html b/MovieVerse-Mobile/platforms/ios/www/index.html
index 89635dda..cbd545c2 100644
--- a/MovieVerse-Mobile/platforms/ios/www/index.html
+++ b/MovieVerse-Mobile/platforms/ios/www/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
@@ -535,7 +534,6 @@
         }
     </style>
 </head>
-
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -543,7 +541,6 @@
     gtag('js', new Date());
     gtag('config', 'G-CQKJ67FXZ4');
 </script>
-
 <body>
     <header id="homepage-header" style="margin-bottom: -10px">
         <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
diff --git a/MovieVerse-Mobile/platforms/ios/www/js/chat.js b/MovieVerse-Mobile/platforms/ios/www/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/platforms/ios/www/js/chat.js
+++ b/MovieVerse-Mobile/platforms/ios/www/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/platforms/ios/www/js/chatbot.js b/MovieVerse-Mobile/platforms/ios/www/js/chatbot.js
index 47871124..30ad3a1f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/ios/www/js/chatbot.js
@@ -3,6 +3,7 @@ import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/ge
 const chatbotInput = document.getElementById("chatbotInput");
 const chatbotBody = document.getElementById("chatbotBody");
 const movieee = `https://${getMovieVerseData()}/3`;
+
 let initialMainContent;
 let conversationHistory = [];
 
@@ -177,6 +178,7 @@ function updateMovieVisitCount(movieId, movieTitle) {
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
+
     movieVisits[movieId].count += 1;
 
     if (!uniqueMoviesViewed.includes(movieId)) {
@@ -219,6 +221,7 @@ function getMostVisitedMovie() {
 
 function getMostVisitedActor() {
     const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+
     let mostVisitedActor = '';
     let maxVisits = 0;
 
@@ -234,6 +237,7 @@ function getMostVisitedActor() {
 
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
@@ -264,63 +268,6 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
-function updateUniqueDirectorsViewed(directorId) {
-    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-    if (!viewedDirectors.includes(directorId)) {
-        viewedDirectors.push(directorId);
-        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
-    }
-}
-
-function updateActorVisitCount(actorId, actorName) {
-    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-    if (!actorVisits[actorId]) {
-        actorVisits[actorId] = { count: 0, name: actorName };
-    }
-
-    actorVisits[actorId].count += 1;
-    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
-}
-
-function updateDirectorVisitCount(directorId, directorName) {
-    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    if (!directorVisits[directorId]) {
-        directorVisits[directorId] = { count: 0, name: directorName };
-    }
-
-    directorVisits[directorId].count += 1;
-    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
-}
-
-function calculateMoviesToDisplay() {
-    const screenWidth = window.innerWidth;
-    if (screenWidth <= 689.9) return 10; // 1 movie per row
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -348,66 +295,20 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
             <span style="color: #ff8623;">MovieVerse Assistant:</span>
             <span style="display: inline-block; text-align: left; color: #fff;">
-                Welcome to MovieVerse Assistant! Here's how to get started:
+                Welcome to MovieVerse Assistant 🍿! Here's how to get started:
             </span>
         </div>
         <ul style="text-align: left; margin-bottom: 10px; color: #fff;">
             <li>To find details about a movie, type "Show me details about [movie name]".</li>
-            <li>To watch a movie trailer, type "Show trailer for [movie name]".</li>
-            <li>Or, if you just want quick information about a movie, type "Tell me about [movie name]" or "Do you know about [movie name]".</li>
             <li>You can also ask about genres, top-rated movies, latest movies, get a recommended movie, and any general questions!</li>
-            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like the first three pre-defined functionalities above, as they might trigger those specific functions instead of a broader search.</li> 
+            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like "Show me details about ...", as they might trigger specific functions instead of a broader search.</li> 
         </ul>
-        <div style="text-align: left; color: #fff;">How may I assist you today?</div>
+        <div style="text-align: left; color: #fff;">How may I assist you today? 🎬🍿</div>
     `;
     chatbotBody.innerHTML += `<div>${initialMessage}</div>`;
     scrollToBottom();
@@ -417,40 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -465,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -549,79 +383,21 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    if (lowerMessage.startsWith("do you know about ") ||
-        lowerMessage.startsWith("tell me about ") ||
-        lowerMessage.startsWith("what is ")) {
-        const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-        return await fetchMovieDetailsFromTMDB(movieName);
-    }
-    if (lowerMessage.startsWith("show me details about ") ||
-        lowerMessage.startsWith("i want to know more about ") ||
-        lowerMessage.startsWith("details about ") ||
-        lowerMessage.startsWith("search for ")) {
-        const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-        fetchAndRedirectToMovieDetails(movieName);
-        return `Searching for details about "${movieName}". Please wait...`;
-    }
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
         return `Searching for the trailer of "${movieName}". Please wait...`;
     }
+
     if (lowerMessage.startsWith("hello") || lowerMessage.startsWith("hi") || lowerMessage.startsWith("hey")) {
         return "Hello! How can I assist you with MovieVerse today?";
     }
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -629,7 +405,10 @@ async function movieVerseResponse(message) {
         let fullResponse = '';
         try {
             const genAI = new GoogleGenerativeAI(getAIResponse());
-            const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+            const model = genAI.getGenerativeModel({
+                model: "gemini-1.5-flash",
+                systemInstruction: "You are MovieVerse Assistant - an AI Chatbot of the MovieVerse App. You are here to help users with movie-related or any other general queries. You are trained and powered by MovieVerse AI and Google to provide the best assistance. You can also provide information about movies, actors, directors, genres, and companies, or recommend movies to users.",
+            });
 
             conversationHistory.push({ role: "user", parts: [{ text: message }] });
 
@@ -678,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
@@ -764,6 +544,7 @@ async function showMovieOfTheDay() {
 function fallbackMovieSelection() {
     const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
     const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+
     localStorage.setItem('selectedMovieId', randomFallbackMovie);
     window.location.href = 'movie-details.html';
 }
diff --git a/MovieVerse-Mobile/platforms/ios/www/js/movie-details.js b/MovieVerse-Mobile/platforms/ios/www/js/movie-details.js
index 957fda89..5d9e8acf 100644
--- a/MovieVerse-Mobile/platforms/ios/www/js/movie-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/js/movie-details.js
@@ -1639,8 +1639,15 @@ function createImdbRatingCircle(imdbRating, imdbId) {
     if (imdbRating === 'N/A' || imdbRating === null || imdbRating === undefined) {
         imdbRating = 'N/A';
     }
-
-    imdbRating = imdbRating.toFixed(1);
+    else {
+        imdbRating = parseFloat(imdbRating);
+        if (!isNaN(imdbRating)) {
+            imdbRating = imdbRating.toFixed(1);
+        }
+        else {
+            imdbRating = 'N/A';
+        }
+    }
 
     let circleContainer = document.getElementById('imdbRatingCircleContainer');
     if (!circleContainer) {
diff --git a/MovieVerse-Mobile/platforms/ios/www/js/sign-in.js b/MovieVerse-Mobile/platforms/ios/www/js/sign-in.js
index ca744c7d..dbb35fc4 100644
--- a/MovieVerse-Mobile/platforms/ios/www/js/sign-in.js
+++ b/MovieVerse-Mobile/platforms/ios/www/js/sign-in.js
@@ -58,7 +58,7 @@ document.getElementById('signInForm').addEventListener('submit', async function(
             alert('Successfully signed in!');
             localStorage.setItem('isSignedIn', JSON.stringify(true));
             localStorage.setItem('currentlySignedInMovieVerseUser', email);
-            window.location.href = '../../../../Downloads/The-MovieVerse-Database-ee3ec4ea5610d37178bc008fd505fd99c5f83070/index.html';
+            window.location.href = '../../index.html';
         } else {
             alert('Invalid email or password. Ensure that you have entered a correct combination of email and password - one that we have on file.');
         }
diff --git a/MovieVerse-Mobile/www/css/index.scss b/MovieVerse-Mobile/www/css/index.scss
new file mode 100644
index 00000000..786e8d13
--- /dev/null
+++ b/MovieVerse-Mobile/www/css/index.scss
@@ -0,0 +1,87 @@
+$font-family-poppins: "Poppins", sans-serif;
+$background-color-primary: #7378c5;
+$hover-color: #ff8623;
+$link-color: white;
+$link-hover-color: #f509d9;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: url("../../images/universe-1.png") no-repeat center center fixed;
+  background-size: cover;
+  font-family: $font-family-poppins;
+  margin: 0;
+  align-content: center;
+  overflow-x: hidden;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+
+%button-style {
+  background-color: $background-color-primary;
+  color: black;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  &:hover {
+    background-color: $hover-color;
+    transition: 0.3s ease-in;
+  }
+}
+
+#movie-match-btn {
+  @extend %button-style;
+  position: fixed;
+  bottom: 220px;
+  right: 20px;
+}
+
+#submit-comment {
+  @extend %button-style;
+  padding: 10px 15px;
+}
+
+%link-style {
+  color: $link-color;
+  text-decoration: underline;
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+
+#cast-info, #similar-tv, #director-link {
+  @extend %link-style;
+}
+
+@mixin modal-style {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-top: 5px;
+}
+
+.modal-header {
+  @include modal-style;
+}
+
+.comments-controls {
+  display: flex;
+  align-items: center;
+  button:disabled {
+    cursor: not-allowed;
+  }
+  &.justify-start {
+    justify-content: start;
+  }
+  &.justify-center {
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+  }
+}
diff --git a/MovieVerse-Mobile/www/css/navbar.scss b/MovieVerse-Mobile/www/css/navbar.scss
new file mode 100644
index 00000000..6ff9d8ec
--- /dev/null
+++ b/MovieVerse-Mobile/www/css/navbar.scss
@@ -0,0 +1,97 @@
+$breakpoint-mobile: 480px;
+$breakpoint-tablet: 768px;
+$breakpoint-desktop: 1024px;
+
+$navbar-background-color: #333;
+$navbar-text-color: #fff;
+$navbar-hover-color: #555;
+$mobile-menu-background-color: #222;
+
+@mixin responsive-visibility {
+  @media (max-width: $breakpoint-mobile) {
+    display: none;
+  }
+}
+
+.navbar {
+  background-color: $navbar-background-color;
+  color: $navbar-text-color;
+  padding: 1em;
+
+  .logo {
+    float: left;
+    font-size: 1.5em;
+    margin-right: 15px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    float: right;
+
+    li {
+      display: inline;
+      margin-left: 15px;
+
+      a {
+        text-decoration: none;
+        color: $navbar-text-color;
+
+        &:hover {
+          color: $navbar-hover-color;
+        }
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-tablet) {
+    ul {
+      float: none;
+      text-align: center;
+
+      li {
+        display: block;
+        margin-top: 0.5em;
+      }
+    }
+  }
+}
+
+.mobile-menu-btn {
+  @include responsive-visibility;
+
+  display: inline-block;
+  background-color: $mobile-menu-background-color;
+  color: $navbar-text-color;
+  padding: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.mobile-menu {
+  display: none;
+
+  &.active {
+    display: block;
+    padding: 10px;
+    background-color: $mobile-menu-background-color;
+
+    ul {
+      text-align: center;
+
+      li {
+        margin-top: 10px;
+
+        a {
+          display: block;
+          color: $navbar-text-color;
+
+          &:hover {
+            background-color: $navbar-hover-color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/MovieVerse-Mobile/www/css/profile.scss b/MovieVerse-Mobile/www/css/profile.scss
new file mode 100644
index 00000000..78f9b2e3
--- /dev/null
+++ b/MovieVerse-Mobile/www/css/profile.scss
@@ -0,0 +1,83 @@
+$primary-color: #4A90E2;
+$secondary-color: #50E3C2;
+$text-color: #4A4A4A;
+$background-color: #F5F7FA;
+$padding-standard: 15px;
+$border-radius-standard: 5px;
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin card-style {
+  background-color: white;
+  border-radius: $border-radius-standard;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: $padding-standard;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  color: $text-color;
+  background-color: $background-color;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.profile-container {
+  @include flex-center;
+  flex-direction: column;
+}
+
+.profile-header {
+  @include flex-center;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  .profile-image {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    margin-bottom: $padding-standard;
+  }
+
+  .profile-name {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .profile-bio {
+    text-align: center;
+    margin-top: $padding-standard;
+  }
+}
+
+.profile-content {
+  @include card-style;
+  margin: 20px auto;
+  width: 90%;
+  max-width: 600px;
+
+  .section {
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    h2 {
+      border-bottom: 2px solid $primary-color;
+      padding-bottom: $padding-standard / 2;
+    }
+
+    p, ul {
+      margin-top: $padding-standard / 2;
+    }
+  }
+}
diff --git a/MovieVerse-Mobile/www/css/reset.css b/MovieVerse-Mobile/www/css/reset.css
new file mode 100644
index 00000000..7a836fce
--- /dev/null
+++ b/MovieVerse-Mobile/www/css/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/MovieVerse-Mobile/www/css/style.css b/MovieVerse-Mobile/www/css/style.css
new file mode 100644
index 00000000..f24d2b24
--- /dev/null
+++ b/MovieVerse-Mobile/www/css/style.css
@@ -0,0 +1,4087 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-Light.ttf') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+body {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    align-content: center;
+    overflow-x: hidden;
+    min-height: 100vh;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+}
+
+#heading-href {
+    text-decoration: none;
+}
+
+.cast-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.cast-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 115px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.cast-image {
+    width: 100%;
+    height: 155px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.cast-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.cast-details {
+    width: 100%;
+}
+
+.actor-name, .actor-role {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+    white-space: normal;
+    text-align: center;
+}
+
+.actor-role {
+    font-style: italic;
+}
+
+.last-episode {
+    flex-direction: column;
+    align-items: center;
+    display: inline-block;
+}
+
+.last-episode strong {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.last-episode-image-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.last-episode-image {
+    max-width: 220px;
+    height: auto;
+    border-radius: 5px;
+}
+
+.last-episode-image:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.director-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.director-list {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.director-link {
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+
+.director-link .cast-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.director-link .cast-image {
+    width: 100%;
+    height: 155px;
+    margin-bottom: 5px;
+}
+
+.director-link .actor-name {
+    font-size: 12px;
+}
+
+.creators-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.creator-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 115px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.creator-image {
+    width: 100%;
+    height: 155px;
+    object-fit: cover !important;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.creator-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.creator-details {
+    width: 100%;
+}
+
+.creator-name {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+}
+
+#movie-match-btn {
+    position: fixed;
+    bottom: 220px;
+    right: 20px;
+    background-color: #7378c5;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#user-name {
+    font: inherit;
+    border-radius: 8px;
+}
+
+#user-comment {
+    font: inherit;
+    border-radius: 8px;
+}
+
+#submit-comment {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+}
+
+#submit-comment:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.comments-controls {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+}
+
+button:disabled {
+    cursor: not-allowed;
+}
+
+.comments-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+}
+
+#cast-info {
+    color: white;
+    text-decoration: underline;
+}
+
+#cast-info:hover {
+    color: #ff8623;
+}
+
+#similar-tv {
+    color: white;
+    text-decoration: underline;
+}
+
+#similar-tv:hover {
+    color: #ff8623;
+}
+
+#director-link {
+    color: white;
+    text-decoration: underline;
+}
+
+#director-link:hover {
+    color: #ff8623;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    margin-top: 5px;
+}
+
+#toggle-filters-btn {
+    margin: 10px;
+    background-color: #7378c5;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s ease;
+    padding: 10px 20px;
+    font: inherit;
+}
+
+#toggle-filters-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease;
+}
+
+#movie-tv-filters, #people-filters, #tv-filters {
+    max-width: 500px;
+    margin: 4px auto;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border: 2px solid #7378c5;
+    min-width: 290px;
+}
+
+#movie-tv-filters label, #movie-tv-filters select, #movie-tv-filters input[type="number"], #movie-tv-filters input[type="range"],
+#people-filters label, #people-filters select, #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters label, #tv-filters select, #tv-filters input[type="range"], #tv-filters input[type="number"] {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+    font-family: "Poppins", sans-serif;
+    color: #fff;
+}
+
+#movie-tv-filters label, #people-filters label, #tv-filters label {
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+#movie-tv-filters select, #people-filters select, #tv-filters select {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-tv-filters select:hover, #people-filters select:hover, #tv-filters select:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#movie-tv-filters select:focus, #people-filters select:focus, #tv-filters select:focus {
+    background-color: #7378c5;
+}
+
+#movie-tv-filters select:focus option:hover, #people-filters select:focus option:hover, #tv-filters select:focus option:hover {
+    background-color: #ff8623;
+}
+
+#movie-tv-filters input[type="number"], #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters input[type="range"], #tv-filters input[type="number"] {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-tv-filters input[type="number"]:hover, #people-filters input[type="range"]:hover, #people-filters input[type="number"]:hover, #tv-filters input[type="range"]:hover, #tv-filters input[type="number"]:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#reset-filters {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 25px;
+    border: none;
+    cursor: pointer;
+    color: white;
+    padding: 10px 15px;
+    margin-top: 30px;
+    display: block;
+    width: 100%;
+}
+
+#reset-filters:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#rating-filter {
+    vertical-align: top;
+}
+
+#movie-tv-filters span, #people-filters span {
+    font-weight: bold;
+    margin-left: 10px;
+}
+
+input[type=range] {
+    cursor: pointer;
+}
+
+#rating-value {
+    font: inherit;
+}
+
+.modal-header h3 {
+    flex-grow: 1;
+    text-align: center;
+    margin: 0;
+}
+
+.close {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+}
+
+#year-filter::placeholder {
+    color: white;
+}
+
+#year-tv-filter::placeholder {
+    color: white;
+}
+
+#toggle-comment-modal, #prev-page, #next-page {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    color: white;
+}
+
+#toggle-comment-modal:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#prev-page:disabled, #next-page:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+#prev-page:disabled, #next-page:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+#prev-page:hover, #next-page:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#comments-section h3 {
+    text-align: center;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    border-radius: 10px;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+p {
+    text-align: center;
+    color: #a6967e;
+}
+
+.button2 {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    right: 18px;
+    position: absolute;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+}
+
+html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
+
+.main2 {
+    text-align: center;
+    color: orange;
+    scroll-behavior: smooth;
+}
+
+.main2 p {
+    color: orange;
+}
+
+header {
+    background-color: transparent;
+    display: flex;
+    justify-content: flex-end;
+    padding: 1.5rem;
+}
+
+.search {
+    background-color: transparent;
+    border: 2px solid #121280;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    width: 250px;
+}
+
+#main {
+    align-self: center;
+    margin-left: 45px;
+}
+
+.search::placeholder {
+    color: #7378c5;
+}
+
+#search:hover {
+    outline: none;
+    background-color: #22254b;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 100px;
+    padding-top: -20px;
+}
+
+header h1 {
+    color: #ff8623;
+    text-align: center;
+}
+
+#privacy-header {
+    color: #ff8623;
+    text-align: center;
+}
+
+.highlight {
+    color: orange;
+}
+
+.highlight:hover {
+    color: #ff8623;
+}
+
+.highlight2 {
+    color: orange;
+}
+
+.highlight2:hover {
+    color: #ff8623;
+}
+
+.search:focus {
+    outline: none;
+    background-color: #22254b;
+}
+
+.about {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 130px;
+    border-radius: 8px;
+    z-index: 999;
+}
+
+.header2 {
+    text-align: center;
+    align-self: center;
+    margin-left: 500px;
+}
+
+.back-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 41px;
+    border-radius: 8px;
+    z-index: 999;
+}
+
+.movie-card {
+    display: flex;
+    background: #fff;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.movie-image {
+    width: 150px;
+    height: 225px;
+    background-size: cover;
+    background-position: center;
+}
+
+.tvSeries-info {
+    padding: 20px;
+    flex-grow: 1;
+}
+
+.green {
+    color: #4CAF50;
+}
+
+.orange {
+    color: #FF9800;
+}
+
+.red {
+    color: #ff0000;
+}
+
+#profileBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    width: 100px;
+    top: 0;
+    margin-left: 316px;
+    border-radius: 8px;
+}
+
+#profileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#mobileGoogleSignInBtn {
+    display: none;
+}
+
+#mobileProfileBtn {
+    display: none;
+}
+
+@media screen and (max-width: 900px) {
+    #mobileGoogleSignInBtn {
+        display: block;
+    }
+
+    #mobileProfileBtn {
+        display: block;
+    }
+}
+
+.back-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.movie {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+    height: 555px;
+}
+
+.tvSeries {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+    height: 555px;
+}
+
+.movie img, .tvSeries img {
+    height: 435px;
+    width: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.movie .overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+    text-align: center;
+}
+
+.tvSeries .overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.tvSeries-info h3 {
+    margin: 0;
+}
+
+.tvSeries:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.tvSeries-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.tvSeries-info span.green {
+    color: rgb(39,189,39);
+}
+
+.movie-info span.green {
+    color: rgb(39,189,39);
+}
+
+.tvSeries-info span.orange {
+    color: orange;
+}
+
+.movie-info span.orange {
+    color: orange;
+}
+
+.tvSeries-info span.red {
+    color: rgb(189,42,42);
+}
+
+.movie-info span.red {
+    color: rgb(189,42,42);
+}
+
+.overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.movie:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.overview h4 {
+    margin-top: 0;
+}
+
+.genres {
+    align-self: center;
+    margin-left: 15px;
+    color: #ff8623;
+}
+
+#other1:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.circle-text {
+    font-size: 25px;
+    font-weight: bold;
+    dominant-baseline: middle;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.about:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+#my-heading1 {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards 0.5s;
+}
+
+#trivia-btn {
+    position: fixed;
+    bottom: 60px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#trivia-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.button2:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#discussions-btn {
+    position: fixed;
+    bottom: 100px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#discussions-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-of-the-day-btn {
+    position: fixed;
+    bottom: 140px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#loadMoreButton {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    color: white;
+    margin-top: 20px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#loadMoreButton:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-of-the-day-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-of-the-day-btn2 {
+    position: fixed;
+    bottom: 80px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-of-the-day-btn2:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#button-search {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#button-search:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.details-container {
+    display: flex;
+    height: calc(100% - 60px);
+    color: white;
+    overflow-y: auto;
+    align-items: start;
+}
+
+.movie-left, .movie-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.actor-left, .actor-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 20px;
+}
+
+.director-left, .director-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 20px;
+}
+
+#actor-name {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    margin-top: -10px;
+}
+
+.movie-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.movie-left img {
+    height: auto;
+}
+
+.actor-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.director-left {
+    width: 33.3333%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.movie-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    height: 100%;
+}
+
+.actor-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-top: 70px;
+}
+
+.director-right {
+    width: 66.6666%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    margin-top: 40px;
+}
+
+.movie-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+    margin-right: 5px;
+}
+
+.movie-link:hover {
+    color: #ff8623;
+}
+
+.movie-image {
+    width: 100%;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+@media (max-width: 768px) {
+    .movie-image {
+        height: auto;
+    }
+    #actor-image {
+        height: auto;
+    }
+}
+
+.movie-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.actor-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#rating {
+    color: inherit;
+}
+
+#rating:hover {
+    color: #ff8623;
+}
+
+#metacritics {
+    color: inherit;
+}
+
+#metacritics:hover {
+    color: #ff8623;
+}
+
+.director-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.adult-indicator {
+    color: red;
+    font-weight: bold;
+}
+
+.general-indicator {
+    color: green;
+    font-weight: bold;
+}
+
+.movie-description {
+    font-size: 1rem;
+    color: white;
+    width: 100%;
+}
+
+.companies-section {
+    margin-top: 20px;
+}
+
+.companies-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.company-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+@media (max-width: 768px) {
+    .company-item {
+        max-width: 125px;
+    }
+}
+
+.company-logo {
+    max-width: 100px;
+    max-height: 75px;
+    height: auto;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.company-item:hover {
+    transform: scale(1.07);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.company-details {
+    width: 100%;
+}
+
+.company-name {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+    white-space: normal;
+    text-align: center;
+}
+
+.actor-description {
+    font-size: 1rem;
+    color: white;
+    transform: translateY(10%);
+}
+
+.director-description {
+    font-size: 1rem;
+    color: white;
+    transform: translateY(10%);
+}
+
+.streaming-logo {
+    display: inline-flex;
+    align-items: flex-end;
+    vertical-align: bottom;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.streaming-logo img {
+    width: 50px;
+    margin-left: 10px;
+    transition: transform 0.3s ease;
+}
+
+.streaming-logo:hover {
+    transform: scale(1.1);
+    cursor: pointer;
+}
+
+.movie-rating {
+    margin-top: 100px;
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#user-ratings {
+    color: inherit;
+}
+
+#user-ratings:hover {
+    color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+#userRatings {
+    color: inherit;
+}
+
+#userRatings:hover {
+    color: #ff8623;
+}
+
+#githubLink {
+    color: white !important;
+}
+
+#githubLink1 {
+    color: black !important;
+}
+
+#githubLink1:hover {
+    color: #ff8623 !important;
+    transition: 0.1s ease-in;
+}
+
+#githubLink2 {
+    color: white !important;
+}
+
+#githubLink2: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;
+}
+
+.modal-overlay {
+    display: none;
+    position: fixed;
+    z-index: 100000000002;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-visible {
+    display: flex !important;
+}
+
+.pin-btn {
+    color: #ff8623;
+}
+
+.pin-btn:hover {
+    color: #c45c00;
+}
+
+.pin-btn.pinned {
+    color: #7378c5;
+}
+
+.spinner {
+    border: 4px solid #000;
+    border-radius: 50%;
+    border-top: 5px solid #ff8623;
+    width: 100px;
+    height: 100px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+#githubLink:hover {
+    color: #ff8623 !important;
+    transition: 0.1s ease-in;
+}
+
+#imdbRating, #rtRating {
+    text-decoration: none;
+    color: inherit;
+    font-size: 2.5rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#imdbRating:hover {
+    color: #ff8623;
+}
+
+#rtRating:hover {
+    color: #ff8623;
+}
+
+#movie-rating h2:hover {
+    color: initial;
+}
+
+h2 {
+    font-size: 1.74rem;
+}
+
+h2:hover {
+    color: orange;
+    transition: 0.1s linear;
+}
+
+p {
+    color: white;
+}
+
+.similar-movies-container h3 {
+    color: #E0E0E0;
+}
+
+.similar-movies span:hover {
+    text-decoration: none;
+    opacity: 0.8;
+    color: #ff8623;
+}
+
+.movie-details-body {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: repeat;
+}
+
+.movie-details-body2 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-position: center;
+    height: 100vh;
+    background-size: auto;
+    background-repeat: repeat;
+}
+
+.movie-details-body3 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+
+.movie-details-body4 {
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+
+.favorites-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 219px;
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+    z-index: 999;
+    max-width: 95px;
+}
+
+#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;
+}
+
+#searchContainer {
+    position: relative;
+    display: inline-block;
+}
+
+#averageDisplays {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+    width: 100%;
+}
+
+.progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    flex: 1;
+    text-align: center;
+}
+
+.progress-ring {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.progress-ring__circle {
+    fill: transparent;
+    stroke-width: 10;
+    stroke: #fff;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+}
+
+.progress-ring__progress {
+    fill: transparent;
+    stroke-width: 10;
+    stroke: var(--progress-color);
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    transition: stroke-dashoffset 0.6s ease-out;
+}
+
+.progress-ring__text {
+    font-size: 20px;
+    dominant-baseline: middle;
+    text-anchor: middle;
+    opacity: 0;
+    transition: opacity 0.6s ease-out;
+}
+
+strong {
+    font-weight: bold;
+}
+
+.favorites-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#favorite-btn {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: grey;
+    margin-left: 10px;
+    border-radius: 8px;
+    width: 40px;
+    box-shadow: none;
+    position: relative;
+    cursor: pointer;
+}
+
+#favorite-btn:hover {
+    background-color: #dcdcdc;
+}
+
+.tooltip-text {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 10%;
+    margin-left: -90px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.title-favorites-container {
+    display: flex;
+    align-items: center;
+    overflow: visible;
+}
+
+#favorite-btn.favorited {
+    color: red;
+}
+
+#favorites-main {
+    margin-left: 15px;
+}
+
+#favorite-btn:hover::after {
+    content: "Favorite / Unfavorite";
+    position: absolute;
+    top: -45px;
+    left: 50%;
+    width: 55px;
+    transform: translateX(-70%);
+    background-color: #232323;
+    color: white;
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 12px;
+    pointer-events: none;
+    z-index: 10;
+}
+
+#main2 {
+    text-align: center;
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+    margin-bottom: 300px;
+}
+
+#main2 h2, #main2 h3 {
+    color: #ff8623;
+    margin-bottom: 20px;
+}
+
+#aboutHeader {
+    margin-top: -25px;
+}
+
+#main2 p, #main2 ul, #main2 li {
+    text-align: left;
+    margin: auto;
+    max-width: 800px;
+    color: #ff8623;
+}
+
+#main2 ul {
+    list-style: none;
+    padding: 0;
+}
+
+#main2 li {
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: black;
+    align-items: center;
+}
+
+#main2 li:hover {
+    background-color: #e6e6e6;
+}
+
+#main2 a {
+    color: #7378c5;
+    text-decoration: none;
+}
+
+#main2 a:hover {
+    text-decoration: underline;
+}
+
+.app-link {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.app-link button {
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px 15px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: black;
+    cursor: pointer;
+    font-size: 16px;
+    display: block;
+    width: auto;
+    margin: 10px auto;
+}
+
+.app-btn {
+    background-color: #7378c5;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px 15px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+    color: white;
+    cursor: pointer;
+    font: inherit;
+    display: block;
+    width: auto;
+    margin: 10px auto;
+    transition: 0.1s ease-in;
+}
+
+.clock {
+    text-align: center;
+    font-size: 20px;
+    color: #ff8623;
+}
+
+.clock:hover {
+    color: #ff8623;
+}
+
+#time-label {
+    color: #ff8623;
+}
+
+#time-label:hover {
+    color: #ff8623;
+}
+
+.app-btn:hover {
+    background-color: #ff8623;
+}
+
+.app-link button:hover {
+    background-color: #e6e6e6;
+}
+
+.app-link p {
+    margin-top: 10px;
+    color: white;
+}
+
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-container {
+    text-align: center;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#trailerButton {
+    color: #fff;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#trailerButton:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.trailer-button {
+    display: block;
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+    font-size: 1rem;
+}
+
+.trailer-button:hover {
+    background-color: #ff8623;
+}
+
+.cast-container {
+    margin-top: 20px;
+}
+
+.actor {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor:hover {
+    color: #0056b3;
+}
+
+.actor-item {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor-item:hover {
+    color: #0056b3;
+}
+
+.cast-container {
+    margin-top: 20px;
+}
+
+.actor-link {
+    cursor: pointer;
+    color: #007bff;
+    text-decoration: underline;
+}
+
+.actor-link:hover {
+    color: #0056b3;
+}
+
+.cast-list {
+    white-space: nowrap;
+    overflow-x: auto;
+    margin-top: 10px;
+}
+
+.actor-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.watchlist-buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 60px;
+    margin-left: 30px;
+}
+
+.watchlist-buttons-container button {
+    margin: 0 10px;
+    background-color: #7378c5;
+    font: inherit;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.1s ease-in;
+}
+
+#button {
+    margin: 0 10px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.1s ease-in;
+}
+
+#button:hover {
+    background-color: #ff8623;
+}
+
+.watchlist-buttons-container button:hover {
+    background-color: #ff8623;
+}
+
+#search-container {
+    display: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 8px;
+    color: white;
+    margin: 10px;
+}
+
+#movie-match-container1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0;
+    padding: 0;
+    top: 0;
+    margin: 0;
+}
+
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.checkbox-container label {
+    margin-top: 6px;
+}
+
+.active-category {
+    background-color: #ff8623;
+    color: white;
+}
+
+.nav-button {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.nav-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#menu-btn {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+    font-size: 14px;
+    z-index: 1000000002 !important;
+}
+
+#menu-btn i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+#menu-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#settings-container {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 32px;
+    color: white;
+    margin: 5px auto;
+    max-width: 500px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+@media (max-width: 700px) {
+    #settings-container {
+        max-width: calc(100% - 10px);
+        margin: 10px 10px;
+    }
+}
+
+#chat-button,
+#settings-btn,
+#movie-of-the-day-btn,
+#movie-match-btn,
+#movie-match-btn3,
+#movie-timeline-btn,
+#discussions-btn,
+#trivia-btn,
+#back-to-top-btn {
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    transform: translateY(20px);
+    opacity: 0;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #movie-match-btn3,
+    #trivia-btn,
+    #back-to-top-btn {
+        position: fixed;
+        right: 10px;
+        z-index: 1000;
+    }
+
+    #menu-btn {
+        display: block;
+    }
+}
+
+.mobile-bottom-bar {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: auto;
+    background-color: #7378c5;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+    justify-content: space-around;
+    align-items: center;
+    z-index: 100000222;
+    transition: transform 0.09s ease-in-out;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+}
+
+.hide-bar {
+    transform: translateY(100%);
+}
+
+.mobile-bottom-bar a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    text-align: center;
+    color: white;
+    text-decoration: none;
+    padding: 6px 0;
+    width: 15%;
+}
+
+.mobile-bottom-bar a:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.mobile-bottom-bar i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+.mobile-bottom-bar span {
+    display: block;
+    font-size: 10px;
+    color: #ecf0f1;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #trivia-btn,
+    #menu-btn,
+    #back-to-top-btn {
+        display: none;
+    }
+}
+
+.nav-button:disabled {
+    background-color: #b5b5b5;
+    cursor: not-allowed;
+}
+
+.search-users-container {
+    text-align: center;
+    margin: 20px auto;
+    background-color: rgba(55, 59, 105, 0.8);
+    padding: 15px;
+    border-radius: 8px;
+    max-width: 500px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    color: white;
+    font: inherit;
+}
+
+.search-users-container input[type="text"] {
+    width: 70%;
+    padding: 10px;
+    margin-right: 10px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    font: inherit;
+}
+
+.search-users-container button {
+    padding: 10px 20px;
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font: inherit;
+}
+
+.search-users-container button:hover {
+    background-color: #ff8623;
+}
+
+.search-results-container {
+    display: none;
+    background-color: rgba(211, 211, 211, 0.5);
+    max-width: 500px;
+    margin: 10px auto;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    text-align: left;
+}
+
+#viewMyProfileBtn {
+    display: block;
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 20px;
+    margin: 20px auto;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font: inherit;
+}
+
+#viewMyProfileBtn:hover {
+    background-color: #ff8623;
+}
+
+.user-search-result {
+    background-color: rgba(55, 59, 105, 0.8);
+    margin: 10px auto;
+    padding: 10px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    color: white;
+    transition: background-color 0.3s ease;
+    height: 100px;
+    max-width: 400px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.user-search-result:hover {
+    background-color: #ff8623;
+}
+
+.user-search-result img {
+    width: auto;
+    height: 95%;
+    max-height: 100px;
+    margin-right: 10px;
+    border-radius: 8px;
+    object-fit: contain;
+}
+
+#userLink {
+    color: black;
+}
+
+#userLink:hover {
+    color: #ff710d;
+}
+
+#chat-button {
+    background-color: #7378c5;
+    bottom: 325px;
+    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);
+}
+
+#chat-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+.user-search-result div {
+    width: 67%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: left;
+}
+
+.user-search-result strong {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.user-search-result p {
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.pagination {
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    padding: 10px;
+    margin: 10px;
+    text-align: center;
+}
+
+@media (max-width: 767px) {
+    .genres + main + .pagination {
+        text-align: center;
+    }
+
+    .pagination {
+        position: relative;
+        width: calc(100% - 20px);
+        margin-top: 20px;
+    }
+}
+
+.page-button {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    margin: 2px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    font: inherit;
+    font-size: 12.9px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.page-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.page-button.active {
+    background-color: #4a4e8c;
+}
+
+.page-button:disabled {
+    background-color: #b5b5b5;
+    cursor: default;
+}
+
+#search-results-label {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#search-results-label:hover {
+    color: #ff8623;
+}
+
+.category-buttons button {
+    background-color: #7378c5;
+    font: inherit;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    margin: 10px;
+    transition: 0.1s ease-in;
+}
+
+.category-buttons button:hover {
+    background-color: #534caf;
+}
+
+.watchlist {
+    background-color: rgba(255, 255, 255, 0.1);
+    margin: 10px;
+    padding: 15px;
+    border-radius: 8px;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+
+.watchlist-title {
+    font-size: 1.5rem;
+    color: #ff8623;
+    text-align: center;
+}
+
+.watchlist-description {
+    font-size: 1rem;
+    margin-bottom: 10px;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+    background-color: #373b69;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 50%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+}
+
+.modal-content h2 {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.modal-content label {
+    color: #fff;
+    margin-bottom: 10px;
+    display: block;
+}
+
+.modal-content input[type="text"],
+.modal-content textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #7378c5;
+    background-color: #22254b;
+    color: #fff;
+}
+
+.modal-content button {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font: inherit;
+    display: block;
+    margin: 10px auto;
+    transition: background-color 0.3s ease;
+}
+
+.modal-content select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #7378c5;
+    background-color: #22254b;
+    color: #fff;
+}
+
+.modal-content button:hover {
+    background-color: #ff8623;
+}
+
+.modal-content {
+    position: relative;
+    background-color: #373b69;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 50%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+}
+
+.modal-content h2 {
+    color: #ff8623;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.modal-content .close-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: #fff;
+    cursor: pointer;
+}
+
+.modal-content label {
+    color: #fff;
+    margin-bottom: 10px;
+    display: block;
+}
+
+#subheading:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#aboutHeader:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#profileLink {
+    color: white !important;
+    text-decoration: underline !important;
+}
+
+#profileLink:hover {
+    color: #ff8623 !important;
+    transition: 0.1s linear;
+}
+
+textarea {
+    resize: none;
+}
+
+.close-button {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close-button:hover {
+    color: #ff8623;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: #ff8623;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.actor-link:hover {
+    color: #ff8623;
+}
+
+.genres {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#discussion-input {
+    background-color: transparent;
+    border: 2px solid #ff8623;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+}
+
+#discussion-input:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#post-btn {
+    background-color: #ff8623;
+    font: inherit;
+}
+
+#post-btn:hover {
+    background-color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+ol li:hover {
+    color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+#chatbotContainer {
+    width: 95%;
+    max-width: 600px;
+    background-color: rgba(0, 0, 0, 0.7);
+    margin: 20px auto;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#chatbotHeader {
+    background-color: #ff8623;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    border-radius: 8px;
+    margin-top: 10px;
+}
+
+#chatbotBody {
+    overflow-y: auto;
+    max-height: 300px;
+    padding: 10px;
+    border-radius: 8px;
+    color: white;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    margin-top: 10px;
+    border: 1px solid #ff8623;
+}
+
+#sendButton {
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    color: white;
+    background-color: #ff8623;
+    border: none;
+    cursor: pointer;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#sendButton:hover {
+    background-color: #7f4caf;
+    transition: 0.1s linear;
+}
+
+#chatbotInput {
+    width: 100%;
+    padding: 10px 20px;
+    border: 1px solid #ff8623;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    background-color: transparent;
+    color: white;
+    margin-top: 10px;
+    box-sizing: border-box;
+}
+
+.highlight1 {
+    color: orange;
+}
+
+#chatbotInput:focus {
+    outline: none;
+}
+
+#bot-header {
+    text-align: center;
+    width: 100%;
+}
+
+#chatbotBody > div {
+    margin-bottom: 10px;
+    padding: 5px 10px;
+    border-radius: 5px;
+}
+
+@media (max-width: 705px) {
+    #search-title,
+    #alt-title {
+        display: none;
+    }
+}
+
+@media (max-height: 930px) {
+    #search-title,
+    #alt-title {
+        display: none;
+    }
+}
+
+#chatbotBody > div[text-align="right"] {
+    background-color: #ff8623;
+    align-self: flex-end;
+}
+
+#chatbotBody > div[text-align="left"] {
+    background-color: #7378c5;
+    align-self: flex-start;
+}
+
+@media (max-width: 767px) {
+    #chatbotContainer {
+        top: 56.1%
+    }
+}
+
+#change-director-btn {
+    padding: 5px 10px;
+    cursor: pointer;
+    border: none;
+    background-color: #7378c5;
+    font: inherit;
+    color: #000000;
+    border-radius: 8px;
+}
+
+#movie-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#movie-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#actor-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#actor-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#director-image {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#director-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#company-logo {
+    z-index: 100000000;
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    cursor: pointer;
+}
+
+#rating-link {
+    color: white;
+}
+
+#rating-link:hover {
+    color: #ff8623;
+}
+
+#company-logo:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+#change-director-btn:hover {
+    background-color: #ff8623;
+}
+
+#trailerContainer {
+    width: 560px;
+    height: 315px;
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+}
+
+#removeBtn {
+    color: white;
+}
+
+#removeBtn:hover {
+    color: #ff8623;
+}
+
+.director-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.director-link:hover {
+    color: #ff8623;
+}
+
+@media (max-width: 982px) {
+    #local-time {
+        display: none;
+    }
+}
+
+#custom-bg-upload {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid #7378c5;
+    background-color: #22254b;
+    color: white;
+    font-size: 16px;
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+#movie-details-container {
+    margin-top: 10px;
+}
+
+#custom-bg-name {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid #7378c5;
+    background-color: #22254b;
+    color: white;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+#upload-bg-btn {
+    background-color: #ff8623;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    font-size: 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 20px auto;
+    display: block;
+}
+
+.chart-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 20px;
+    justify-content: center;
+}
+
+.chart-box {
+    background-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+    width: 100%;
+    max-width: 600px;
+    height: 400px;
+    margin: 20px auto;
+    opacity: 1;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 900px) {
+    .chart-container {
+        flex-direction: column;
+    }
+
+    .chart-box {
+        height: auto;
+    }
+}
+
+#ratingImdb {
+    color: #ff710d;
+    font-size: 17px;
+}
+
+#ratingImdb:hover {
+    color: #ff8623;
+}
+
+.chart-title {
+    text-align: center;
+    color: #ff710d;
+    margin-bottom: 15px;
+}
+
+#descriptionP {
+    margin-top: -10px;
+}
+
+#upload-bg-btn:hover {
+    background-color: #7378c5;
+    transition: background-color 0.3s ease;
+}
+
+#settings-btn {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#settings-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+@media (max-width: 1000px) {
+    #comments-section {
+        margin-bottom: 210px;
+    }
+}
+
+#local-time {
+    transform: translateX(10%);
+    padding: 10px;
+    border-radius: 10px;
+    z-index: 10;
+}
+
+#mobileProfileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+@media (max-width: 800px) {
+    #my-heading {
+        margin-left: 0;
+    }
+
+    #movie-details-body3 {
+        background-image: url("https://movie-verse.com/images/universe-1.webp");
+        background-position: center;
+        height: 100vh;
+        background-size: auto;
+        background-repeat: repeat;
+        width: 100vw;
+    }
+
+    #profileBtn {
+        display: none;
+    }
+
+    #indexLink {
+        margin-bottom: -15px;
+    }
+
+    .back-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: -180px;
+        border-radius: 8px;
+    }
+
+    .about {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 0;
+        border-radius: 8px;
+    }
+
+    .favorites-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        width: 95px;
+        margin-left: 188px;
+        border-radius: 8px;
+        padding-left: 10px;
+        padding-right: 10px;
+        box-sizing: border-box;
+    }
+
+    #googleSignInBtn {
+        display: none;
+    }
+
+    .movie-details-body {
+        min-height: 100% !important;
+    }
+
+    .movie-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .actor-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .director-left img {
+        width: 90% !important;
+        height: auto !important;
+        overflow: hidden;
+    }
+
+    .details-container {
+        flex-direction: column;
+    }
+
+    #movie-details-container {
+        margin-top: 15px;
+    }
+
+    .movie-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .actor-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .director-left {
+        margin-top: -60px;
+        padding-top: 20px;
+        height: auto;
+        overflow: visible;
+    }
+
+    .movie-left, .movie-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .actor-left, .actor-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .director-left, .director-right {
+        width: 100%;
+        margin: 0;
+        padding: 10px;
+        height: auto;
+    }
+
+    .movie-right {
+        margin-top: 0;
+        height: 100% !important;
+        overflow: visible;
+        margin-bottom: 5px;
+    }
+
+    #descriptionP {
+        margin-top: -100px;
+    }
+
+    .actor-right {
+        margin-top: -20px;
+        height: 100% !important;
+        overflow: visible;
+    }
+
+    .director-right {
+        margin-top: -20px;
+        height: 100% !important;
+        overflow: visible;
+    }
+
+    header {
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    main {
+        margin-bottom: -40px;
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #clear-search-btn {
+        margin-top: 5px;
+    }
+
+    .watchlist-buttons-container {
+        margin-left: -3px;
+    }
+
+}
+
+.year-input-container {
+    margin: 20px;
+}
+
+.year-input {
+    width: 150px;
+    padding: 10px;
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+}
+
+#load-movies {
+    padding: 10px 10px;
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#load-movies:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.movie-card {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+}
+
+#form {
+    margin-top: 20px;
+}
+
+#form1 {
+    margin-top: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.movie-card img {
+    width: 100%;
+}
+
+.movie-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+    padding-top: 14px;
+    flex-grow: 1;
+}
+
+.tvSeries-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+}
+
+.movie-info h3 {
+    margin: 0;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.timeline-container {
+    margin: 20px auto;
+    background-color: rgba(255,255,255,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    width: calc(100% - 24px);
+    border-radius: 16px;
+    margin-top: 50px;
+    text-align: center;
+}
+
+#movie-timeline-btn {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    cursor: pointer;
+}
+
+#movie-timeline-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movies-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+    flex-direction: column;
+}
+
+#tvseries-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+    flex-direction: column;
+}
+
+#tvseries-container .movie-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+#movies-container1 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+#movies-container .movie-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.movies-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.center-container {
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+.center-container1 {
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+#load-movies {
+    cursor: pointer;
+    font: inherit;
+}
+
+#select-text {
+    margin-top: 30px;
+    color: #ff8623;
+}
+
+#select-text:hover {
+    color: #ff8623;
+}
+
+#clear-search-btn {
+    background-color: #7378c5;
+    color: black;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 10px;
+    font: inherit;
+    margin-right: 20px;
+}
+
+#clear-search-btn:hover {
+    background-color: #ff8623;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+    body {
+        background-size: auto;
+        background-repeat: repeat;
+    }
+}
+
+#search-title {
+    color: #ff8623;
+    text-align: center;
+    font-size: 1.74rem;
+    margin-bottom: 20px;
+}
+
+#search-title:hover {
+    color: #ff8623;
+}
+
+#search-title1 {
+    color: #ff8623;
+    text-align: center;
+    font-size: 1.74rem;
+    margin-bottom: 20px;
+}
+
+#search-title1:hover {
+    color: #ff8623;
+}
+
+#movie-match-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    margin-top: 60px;
+    padding: 20px;
+    width: 100%;
+    margin-bottom: 300px;
+}
+
+.profile-container {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.profile-image-container img {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.profile-info p {
+    margin: 10px 0;
+}
+
+body {
+    overflow-x: hidden;
+    max-width: 100%;
+}
+
+#googleSignInBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 420px;
+    border-radius: 8px;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+.mobile-sign-in-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 12px;
+    margin-bottom: 10px;
+}
+
+#mobileGoogleSignInBtn {
+    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;
+}
+
+#mobileProfileBtn {
+    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;
+}
+
+#mobileGoogleSignInBtn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+.movie-match-container {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#movie-match-form {
+    background-color: transparent;
+    border: 2px solid #7378c5;
+    border-radius: 50px;
+    padding: 20px;
+    max-width: 500px;
+    margin: auto;
+}
+
+#movie-match-form label, #movie-match-form select, #movie-match-form input[type="submit"] {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+    font-family: "Poppins", sans-serif;
+    color: #fff;
+}
+
+#movie-match-form label {
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+#movie-match-form select {
+    background-color: #7378c5;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 25px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+#movie-match-form input[type="submit"] {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 25px;
+    border: none;
+    cursor: pointer;
+    color: white;
+    padding: 10px 15px;
+    margin-top: 30px;
+}
+
+#movie-match-form input[type="submit"]:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#movie-match-btn2 {
+    position: fixed;
+    bottom: 115px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn2:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-match-btn3 {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-match-btn3:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-match-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.company-left, .company-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-align: center;
+}
+
+.company-left {
+    width: 33.33%;
+}
+
+.company-right {
+    width: 66.67%;
+}
+
+#company-movies-list {
+    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 10px;
+}
+
+#company-movies-list span {
+    margin: 0;
+}
+
+.company-link {
+    cursor: pointer;
+    color: white;
+    text-decoration: underline;
+}
+
+.company-link:hover {
+    color: #ff8623;
+}
+
+.title-logo-container {
+    text-align: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.company-header {
+    text-align: center;
+    align-self: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffeb3b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.company-description {
+    margin-top: 20px;
+}
+
+.company-description, #company-headquarters, #company-country, #company-website {
+    color: white;
+    margin-bottom: 10px;
+}
+
+#company-website:hover {
+    color: #ff8623;
+}
+
+.movies-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.movies-list a {
+    color: white;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.movies-list a:hover {
+    color: purple;
+}
+
+@media (max-width: 800px) {
+    .company-details-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .company-left {
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .company-right {
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .company-left img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+#button-clear {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 15px;
+    font: inherit;
+    cursor: pointer;
+    margin-left: 10px;
+    color: #000000;
+    margin-right: 40px;
+}
+
+#rating-value:hover {
+    color: #ff8623;
+}
+
+#button-clear:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.rating {
+    display: flex;
+    justify-content: flex-end;
+    direction: rtl;
+    color: grey;
+    font-size: 20px;
+}
+
+.rating .star {
+    color: white;
+    cursor: pointer;
+    transition: color 200ms;
+}
+
+.rating .star:hover,
+.rating .star:hover ~ .star {
+    color: gold;
+}
+
+@keyframes shake {
+    0% { transform: translateX(0); }
+    20% { transform: translateX(-5px); }
+    40% { transform: translateX(5px); }
+    60% { transform: translateX(-5px); }
+    80% { transform: translateX(5px); }
+    100% { transform: translateX(0); }
+}
+
+.shake-animation {
+    animation: shake 0.5s ease-in-out 5;
+}
+
+.search-results {
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+#form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+}
+
+#search-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.search-result-card {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #7378c5;
+    margin-bottom: 2px;
+    margin-top: 5px;
+    width: 300px;
+    color: #212121;
+}
+
+.search-result-card:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.buttons-container button {
+    padding-left: 20px;
+}
+
+#clear-search {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    padding: 5px 10px;
+    margin-top: 10px;
+    margin-left: 20px;
+}
+
+#clear-search:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#view-all-results {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    margin-top: 10px;
+}
+
+#view-all-results:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.result-image {
+    width: 64px;
+    height: 96px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.result-details {
+    margin-left: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+.result-name {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.result-type {
+    font-size: 14px;
+    font-style: italic;
+    color: #212121;
+}
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+    color: white;
+    transition: 0.3s ease-in;
+}
+
+#footer:hover {
+    cursor: pointer;
+}
+
+.notification-btn {
+    position: fixed;
+    top: 5px;
+    right: 20px;
+    z-index: 100;
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    cursor: pointer;
+    padding: 9px;
+    border-radius: 8px;
+    transition: 0.1s ease-in;
+}
+
+#closeModalButton {
+    background-color: #7378c5;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    text-align: center;
+    transition: 0.1s ease-in;
+}
+
+#closeModalButton:hover {
+    background-color: #ff8623;
+}
+
+#closeModalButton {
+    margin: 10px auto;
+    display: block;
+}
+
+.notification-btn:hover {
+    background-color: #ff8623;
+}
+
+.notification-modal {
+    position: fixed;
+    top: 50px;
+    right: 20px;
+    background-color: #7378c5;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    padding: 20px;
+    width: 300px;
+    z-index: 1002;
+    color: white;
+}
+
+@media (max-width: 900px) {
+    .notification-modal {
+        right: 12.5px;
+    }
+
+    .notification-btn {
+        right: 12.5px;
+    }
+}
+
+.notification-link:hover {
+    color: #ff8623 !important;
+}
+
+.notification-modal h4 {
+    margin: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.notification-modal ul {
+    list-style: none;
+    padding: 0;
+    margin-top: 10px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.notification-modal ul li {
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+}
+
+#comments-section {
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px 0;
+    max-width: calc(100% - 20px);
+}
+
+@keyframes dropIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: dropIn 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1s;
+}
+
+#local-time {
+    cursor: pointer;
+    opacity: 0;
+    animation: dropIn 1s ease forwards 1.5s;
+}
+
+#local-time p,
+#local-time div {
+    opacity: 0;
+    animation: dropIn 1s ease forwards 2s;
+}
diff --git a/MovieVerse-Mobile/www/css/trivia.css b/MovieVerse-Mobile/www/css/trivia.css
new file mode 100644
index 00000000..6a40c7c3
--- /dev/null
+++ b/MovieVerse-Mobile/www/css/trivia.css
@@ -0,0 +1,1157 @@
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+}
+
+#footerP {
+    color: white !important;
+}
+
+#footerP:hover {
+    transition: 0.1s ease-in;
+    color: #ff8623 !important;
+}
+
+@media (max-width: 900px) {
+    #local-time {
+        display: none;
+    }
+}
+
+body {
+    color: #ff903a;
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    align-content: center;
+    text-align: center;
+    background-image: url("https://movie-verse.com/images/universe-1.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
+
+#profileBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    width: 100px;
+    top: 0;
+    margin-left: 316px;
+    border-radius: 8px;
+}
+
+#profileBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-results {
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    margin: 0 auto;
+    align-items: center;
+}
+
+#form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+}
+
+.search-result-card {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #7378c5;
+    margin: 0;
+    margin-bottom: 2px;
+    margin-top: 5px;
+    width: 300px;
+    color: #212121;
+}
+
+.search-result-card:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.buttons-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.buttons-container button {
+    padding-left: 20px;
+}
+
+#clear-search {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    padding: 5px 10px;
+    margin-top: 10px;
+    margin-left: 20px;
+}
+
+#clear-search:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+#view-all-results {
+    background-color: #7378c5;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    font: inherit;
+    cursor: pointer;
+    color: #000000;
+    margin-top: 10px;
+}
+
+#view-all-results:hover {
+    background-color: #ff8623;
+    transition: background-color 0.3s ease;
+}
+
+.result-image {
+    width: 64px;
+    height: 96px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.result-details {
+    margin-left: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+.result-name {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.result-type {
+    font-size: 14px;
+    font-style: italic;
+    color: #212121;
+}
+
+#googleSignInBtn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 420px;
+    border-radius: 8px;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+#googleSignInBtn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+}
+
+#submit {
+    background-color: #7378c5;
+    font: inherit;
+    margin-bottom: 39px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#submit:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+#regenerate-questions {
+    background-color: #7378c5;
+    font: inherit;
+    margin-bottom: 39px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#regenerate-questions:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#movie-timeline-btn {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-timeline-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#movie-of-the-day-btn {
+    position: fixed;
+    bottom: 140px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#movie-of-the-day-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#discussions-btn {
+    position: fixed;
+    bottom: 100px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#discussions-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+p {
+    text-align: center;
+    color: #ff8623;
+}
+
+.highlight:hover {
+    color: #ff8623;
+}
+
+.button2 {
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    right: 18px;
+    position: absolute;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+.main2 {
+    text-align: center;
+    color: orange;
+    scroll-behavior: smooth;
+}
+
+.main2 p {
+    color: orange;
+}
+
+header {
+    background-color: transparent;
+    display: flex;
+    justify-content: flex-end;
+    padding: 1.5rem;
+}
+
+.search {
+    background-color: transparent;
+    border: 2px solid #121280;
+    border-radius: 50px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    width: 400px;
+}
+
+#main {
+    align-self: center;
+}
+
+.search::placeholder {
+    color: #7378c5;
+}
+
+#search:hover {
+    outline: none;
+    background-color: #22254b;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 100px;
+    padding-top: -20px;
+}
+
+header h1 {
+    color: #ff8623;
+    text-align: center;
+}
+
+.highlight {
+    color: orange;
+}
+
+.search:focus {
+    outline: none;
+    background-color: #22254b;
+}
+
+.about {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 130px;
+    border-radius: 8px;
+}
+
+.header2 {
+    text-align: center;
+    align-self: center;
+    margin-left: 500px;
+}
+
+.back-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    width: 85px;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 41px;
+    border-radius: 8px;
+}
+
+.back-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.movie {
+    background-color: #373b69;
+    border-radius: 3px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    margin: 1rem;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+}
+
+.movie img {
+    width: 100%;
+}
+
+.movie-info {
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 1rem;
+    letter-spacing: 0.5px;
+}
+
+.movie-info h3 {
+    margin: 0;
+}
+
+.movie-info span {
+    background-color: #22254b;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+}
+
+.movie-info span.green {
+    color: rgb(39,189,39);
+}
+
+.movie-info span.orange {
+    color: orange;
+}
+
+.movie-info span.red {
+    color: rgb(189,42,42);
+}
+
+.overview {
+    position: absolute;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    color: black;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
+    overflow-y: auto;
+    visibility: hidden;
+}
+
+.movie:hover .overview {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+}
+
+.overview h4 {
+    margin-top: 0;
+}
+
+.genres {
+    align-self: center;
+    margin-left: 15px;
+    color: #ff8623;
+}
+
+#other1:hover {
+    color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#back-to-top-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#movie-match-btn3 {
+    position: fixed;
+    bottom: 220px;
+    right: 20px;
+    background-color: #7378c5;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+}
+
+#movie-match-btn3:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#back-to-top-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.about:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    background-color: #7378c5;
+    margin: 15% auto;
+    padding: 20px;
+    width: 80%;
+    max-width: 450px;
+    text-align: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    border-radius: 8px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+}
+
+.modal-content {
+    text-align: center;
+}
+
+.close-button {
+    cursor: pointer;
+    position: relative;
+    top: -2px;
+    font-size: 25px;
+    color: #aaa;
+    font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: red;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.progress-circle {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background: conic-gradient(green 0%, green var(--progress, 0%), red var(--progress, 0%), red 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 20px auto;
+    transition: stroke-dashoffset 0.5s ease-out;
+}
+
+.progress-circle::after {
+    content: '';
+    width: 130px;
+    height: 130px;
+    background: white;
+    border-radius: 50%;
+    display: block;
+}
+
+#correct-answers {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+#result-text {
+    text-align: center;
+    font-size: 20px;
+}
+
+#my-heading {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+.favorites-btn {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font: inherit;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 219px;
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+}
+
+.favorites-btn:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#favorite-btn {
+    background: transparent;
+    color: grey;
+    margin-left: 10px;
+    border-radius: 8px;
+    width: 40px;
+    box-shadow: none;
+    position: relative;
+    cursor: pointer;
+}
+
+#favorite-btn:hover {
+    background-color: #dcdcdc;
+}
+
+#button-search {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+#button-search:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+#settings-btn {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#settings-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+#menu-btn {
+    background-color: #7378c5;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font: inherit;
+    font-size: 14px;
+}
+
+#menu-btn i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+#menu-btn:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+#chat-button {
+    background-color: #7378c5;
+    bottom: 260px;
+    right: 20px;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#chat-button:hover {
+    background-color: #ff8623;
+    transition: 0.1s ease-in;
+}
+
+
+#chat-button,
+#settings-btn,
+#movie-of-the-day-btn,
+#movie-match-btn,
+#movie-match-btn3,
+#movie-timeline-btn,
+#discussions-btn,
+#trivia-btn,
+#back-to-top-btn {
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    transform: translateY(20px);
+    opacity: 0;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #movie-match-btn3,
+    #trivia-btn,
+    #back-to-top-btn {
+        position: fixed;
+        right: 10px;
+        z-index: 1000;
+    }
+
+    #menu-btn {
+        display: block;
+    }
+}
+
+.mobile-bottom-bar {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: auto;
+    background-color: #7378c5;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+    justify-content: space-around;
+    align-items: center;
+    z-index: 1000002;
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+}
+
+.mobile-bottom-bar {
+    transition: transform 0.09s ease-in-out;
+}
+
+.hide-bar {
+    transform: translateY(100%);
+}
+
+.mobile-bottom-bar a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    text-align: center;
+    color: white;
+    text-decoration: none;
+    padding: 3px 0;
+    width: 15%;
+}
+
+.mobile-bottom-bar a:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+.mobile-bottom-bar i {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+.mobile-bottom-bar span {
+    display: block;
+    font-size: 10px;
+    color: #ecf0f1;
+}
+
+#trivia-btn {
+    position: fixed;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+@media (max-width: 767px) {
+    .mobile-bottom-bar {
+        display: flex;
+    }
+
+    #chat-button,
+    #settings-btn,
+    #movie-of-the-day-btn,
+    #movie-match-btn,
+    #movie-timeline-btn,
+    #discussions-btn,
+    #trivia-btn,
+    #menu-btn,
+    #back-to-top-btn {
+        display: none;
+    }
+}
+
+#trivia-label:hover {
+    color: #ff8623;
+}
+
+#trivia-label {
+    margin-top: 50px
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+}
+
+#clear-search-btn {
+    display: block;
+    margin: 20px auto;
+    background-color: #7378c5;
+    color: black;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 10px;
+    font: inherit;
+    margin-right: 20px;
+}
+
+#quiz-container {
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 20px;
+    border-radius: 10px;
+    max-width: calc(100% - 20px);
+    width: 600px;
+    margin: 10px auto;
+    box-sizing: border-box;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+#quiz-form {
+    width: calc(100% - 20px);
+    margin: 10px auto;
+    box-sizing: border-box;
+    padding: 0 10px;
+}
+
+@media (max-width: 520px) {
+    #quiz-container, #quiz-form {
+        width: calc(100% - 20px);
+        margin: 10px auto;
+    }
+}
+
+.button {
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 20px;
+}
+
+#clear-search-btn:hover {
+    background-color: #ff8623;
+}
+
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-align: left;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
+@media (max-width: 900px) {
+    #profileBtn {
+        display: none;
+    }
+}
+
+@media (max-width: 840px) {
+    #my-heading {
+        margin-left: 0;
+    }
+
+    .back-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: -180px;
+        border-radius: 8px;
+    }
+
+    .about {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        width: 85px;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 0;
+        border-radius: 8px;
+    }
+
+    .favorites-btn {
+        background-color: #7378c5;
+        border: none;
+        color: white;
+        height: 40px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font: inherit;
+        font-size: 16px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        margin-left: 189px;
+        border-radius: 8px;
+        padding-left: 12px;
+        padding-right: 12px;
+        box-sizing: border-box;
+    }
+
+    #googleSignInBtn {
+        display: none;
+    }
+
+    header {
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    main {
+        margin-bottom: -40px;
+        justify-content: space-between;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #trivia-label {
+        margin-top: 60px;
+    }
+}
+
+#movie-match-btn2 {
+    position: fixed;
+    bottom: 180px;
+    right: 20px;
+    background-color: #7378c5;
+    font: inherit;
+    color: black;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
diff --git a/MovieVerse-Mobile/www/html/about.html b/MovieVerse-Mobile/www/html/about.html
new file mode 100644
index 00000000..87048c73
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/about.html
@@ -0,0 +1,1286 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>About The MovieVerse - Your Ultimate Movie Guide</title>
+    <meta property="og:title" content="About The MovieVerse - Your Ultimate Movie Guide" />
+    <meta name="description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
+    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/about.html"/>
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#aboutHeader">About The MovieVerse</a></li>
+            <li><a href="#subheading1">Core Features</a></li>
+            <li><a href="#subheading2">Explore Our Other Apps</a></li>
+            <li><a href="#subheading">Our Vision</a></li>
+            <li><a href="#subheading3">Join The Journey</a></li>
+            <li><a href="#subheading4">Useful Links</a></li>
+            <li><a href="terms-of-service.html">Terms of Service</a></li>
+            <li><a href="privacy-policy.html">Privacy Policy</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
+    <main id="main2" style="margin: 0 auto">
+        <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
+        <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
+        <div style="width: 100%">
+            <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
+        </div>
+
+        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
+        <h3 id="subheading1" style="cursor: pointer">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">
+            <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 specialized sections like Director's Spotlight and award-winning films.</li>
+            <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
+            <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Interactive Discussions and Trivia:</strong> Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.</li>
+            <li><i style="margin-right: 3px" class="fas fa-fire"></i> <strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.</li>
+            <li><i style="margin-right: 3px" class="fas fa-clock"></i> <strong>Movie Timeline:</strong> Select a period and explore a curated list of movies from that era, offering a unique way to experience the evolution of film over time.</li>
+            <li><i style="margin-right: 3px" class="fas fa-heart"></i> <strong>Movie Match/Recommendation:</strong> Find or get recommended a movie that matches your mood, genre, and time period, ensuring you always find the perfect movie to watch.</li>
+            <li><i style="margin-right: 3px" class="fas fa-info-circle"></i> <strong>Detailed Filmography Insights:</strong> Delve into the careers of your favorite <a id="githubLink1" href="director-details.html">directors</a>, <a id="githubLink1" href="actor-details.html">actors</a>, and <a id="githubLink1" href="company-details.html">companies</a> with dedicated pages detailing their filmography and impact on cinema.</li>
+            <li><i style="margin-right: 3px" class="fas fa-sign-in-alt"></i> <strong>Sign In/Sign Out:</strong> Sign in to your account to access your personalized movie recommendations, <a id="githubLink1" href="favorites.html">watch lists</a>, <a id="githubLink1" href="user-profile.html">profile</a>, and more.</li>
+            <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Watch Lists:</strong> Save movies to your watch lists and share them with your loved ones, ensuring you never miss out on a movie you want to watch. If you're signed in, your watch lists are <a id="githubLink1" href="favorites.html">accessible</a> across all your devices!</li>
+            <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Chat Functionality:</strong> Engage with fellow movie enthusiasts through our secure <a id="githubLink1" href="chat.html">chat</a> feature, where you can discuss and connect with like-minded MovieVerse individuals!</li>
+            <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Search Functionality:</strong> Use our extensive <a id="githubLink1" href="search.html">search</a> functionality to find movies, actors, directors, and TV series, ensuring you always find what you're looking for.</li>
+            <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
+            <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
+        </ul>
+
+        <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
+
+        <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
+
+        <ul style="align-content: center; color: white">
+            <li>
+                <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';" class="app-btn">The StickyNotes App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Embark on a culinary adventure with RecipeGenie, your go-to database for delightful recipes.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';" class="app-btn">The RecipeGenie Database</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Stay ahead of the weather with WeatherMate, your personal weather forecasting assistant.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';" class="app-btn">The WeatherMate App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Keep track of your tasks and boost productivity with the ToDo App, a straightforward task manager.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-ToDo-App/';" class="app-btn">The ToDo App</button>
+            </li>
+            <li>
+                <p style="color: black; text-align: center">Plan and manage your events seamlessly with EventHorizon, your ultimate event organizer.</p>
+                <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
+            </li>
+        </ul>
+
+        <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
+        <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
+
+        <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
+        <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
+        <br/>
+        <p style="color: white; text-align: center">Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of movies!</p>
+        <br/>
+        <p style="color: white; text-align: center">
+            <em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <strong><a style="color: #ff8623" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a></strong>.
+                <i style="margin-left: 3px" class="fab fa-github"></i>
+            </em>
+        </p>
+
+        <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
+        <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
+        <br/>
+        <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
+        <br/>
+        <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
+
+        <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
+        <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
+        <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
+        <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
+    </main>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
+        </a>
+    </footer>
+
+    <script>
+        document.getElementById('logo').addEventListener('click', function() {
+            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
+
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+
+        document.getElementById('logo').addEventListener('mouseover', function() {
+            this.style.cursor = 'pointer';
+            this.style.transform = 'scale(1.05)';
+            this.style.transition = '0.3s ease-in-out';
+        });
+
+        document.getElementById('logo').addEventListener('mouseout', function() {
+            this.style.transform = 'scale(1)';
+        });
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById("subheading1").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading2").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading2').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading3").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading3').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("subheading4").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('subheading4').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById("aboutHeader").addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('aboutHeader').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/actor-details.html b/MovieVerse-Mobile/www/html/actor-details.html
new file mode 100644
index 00000000..e96b40fe
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/actor-details.html
@@ -0,0 +1,808 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Actor Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html">
+    <meta property="og:title" content="Actor Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        #actor-details-container {
+            margin-top: 0;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #actor-details-container {
+                margin-top: 25px;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #actor-details-container {
+            margin-top: 25px;
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <main id="main" style="margin-left: 25px; height: 0"></main>
+
+    <div class="details-container" id="actor-details-container" style="margin-bottom: 70px;">
+        <!-- Left side for Actor Image -->
+        <div class="actor-left" style="overflow-y: hidden">
+            <h2 id="actor-name" class="actor-header"></h2>
+            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
+            <div style="height: 20px"></div>
+        </div>
+        <!-- Right side for Description and Info -->
+        <div class="actor-right" id="actor-description">
+            <!-- Actor details will be populated here -->
+        </div>
+    </div>
+
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script src="../js/actor-details.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('actor-image').addEventListener('click', function() {
+            const imageUrl = this.src.replace('w1280', 'original')
+            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/analytics.html b/MovieVerse-Mobile/www/html/analytics.html
new file mode 100644
index 00000000..9b02e879
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/analytics.html
@@ -0,0 +1,910 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Database Analytics - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html">
+    <meta property="og:title" content="Database Analytics - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
+    <meta name="twitter:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="https://movie-verse.com/MovieVerse-Frontend/css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("https://movie-verse.com/images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards 0.5s;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        @keyframes dropIn {
+            0% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: dropIn 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1s;
+        }
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0" class="notranslate">
+            <h1 id="my-heading" style="margin-bottom: -10px">
+                The Mo<span class="highlight">vieV</span>erse
+            </h1>
+        </a>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="#chart1">Annual Releases</a></li>
+            <li><a href="#chart2">Genre Popularity</a></li>
+            <li><a href="#chart3">Certification Breakdown</a></li>
+            <li><a href="#chart4">Popularity Trends</a></li>
+            <li><a href="#chart5">Language Counts</a></li>
+            <li><a href="#chart6">Votes by Genre</a></li>
+            <li><a href="#chart7">Monthly Releases</a></li>
+            <li><a href="#chart8">Decadal Releases</a></li>
+            <li><a href="#chart9">Country Releases</a></li>
+            <li><a href="#chart11">Yearly Top Movies</a></li>
+            <li><a href="#chartVotesOverYears">Votes Over Time</a></li>
+            <li><a href="#chartHighlyRatedMovies">Top Movies Trends</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+        </ul>
+    </nav>
+    <div>
+        <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div class="chart-container" style="margin-bottom: 250px">
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title1" style="cursor: pointer">Number of Movies Released Each Year</h2>
+            <canvas id="chart1"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title2" style="cursor: pointer">Popularity of Genres</h2>
+            <canvas id="chart2"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title3" style="cursor: pointer">Movies Distribution by Certification</h2>
+            <canvas id="chart3"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title4" style="cursor: pointer">Average Movie Popularity Over Time</h2>
+            <canvas id="chart4"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title5" style="cursor: pointer">Movies Count by Original Language</h2>
+            <canvas id="chart5"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title6" style="cursor: pointer">Average Vote Count by Genre</h2>
+            <canvas id="chart6"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title7" style="cursor: pointer">Movie Releases by Month</h2>
+            <canvas id="chart7"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title8" style="cursor: pointer">Movie Releases by Decades</h2>
+            <canvas id="chart8"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title9" style="cursor: pointer">Movie Releases by Countries</h2>
+            <canvas id="chart9"></canvas>
+        </div>
+        <div class="chart-box" id="chart-title1">
+            <h2 class="chart-title" id="chart-title10" style="cursor: pointer">Top Rated Movies per Year</h2>
+            <canvas id="chart11"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title11" style="cursor: pointer">Total Movie Votes Over Years</h2>
+            <canvas id="chartVotesOverYears"></canvas>
+        </div>
+        <div class="chart-box">
+            <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated Movies Over Years</h2>
+            <canvas id="chartHighlyRatedMovies"></canvas>
+        </div>
+    </div>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="ad-container2" style="display: block; text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script src="../js/analytics.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData1()}/3/search/multi?${getMovieNames1()}${getMovieCode1()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.error("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.error('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData1()}/3/person/${item.id}?${getMovieNames1()}${getMovieCode1()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.error('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        function getMovieVerseData1(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function getMovieNames1(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode1() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/api_fails.html b/MovieVerse-Mobile/www/html/api_fails.html
new file mode 100644
index 00000000..c7fa1c18
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/api_fails.html
@@ -0,0 +1,1026 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>We're Offline - The MovieVerse</title>
+    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html">
+    <meta property="og:title" content="We're Offline - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="We're Offline - The MovieVerse">
+    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="center-text" style="padding: 120px;">
+        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">MovieVerse is Offline</div>
+        <p>We're sorry, our service is currently unavailable. This could be due to a temporary issue with our servers or your internet connection. Please try again.</p>
+        <p>If you continue to experience issues, please contact our support team at <a id="link" href="support.html">our support page</a>.</p>
+        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
+    </div>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 500px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/article.hbs b/MovieVerse-Mobile/www/html/article.hbs
new file mode 100644
index 00000000..644be6cd
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/article.hbs
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{article.title}}</title>
+</head>
+<body>
+  <header>
+    <h1>{{article.title}}</h1>
+    <p>Written by: {{article.author}}</p>
+  </header>
+  <article>
+    <p>{{article.content}}</p>
+  </article>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/chat.html b/MovieVerse-Mobile/www/html/chat.html
new file mode 100644
index 00000000..4054ba67
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/chat.html
@@ -0,0 +1,1023 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chat - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Chat - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chat.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chat.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Chat - The MovieVerse">
+    <meta name="twitter:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .user-search-result {
+            background-color: #333;
+            margin: 10px auto;
+            padding: 10px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            color: white;
+            transition: background-color 0.3s ease;
+            flex-wrap: wrap;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+        }
+        .user-search-result img {
+            flex-shrink: 0;
+            margin-right: 10px;
+            border-radius: 8px;
+        }
+        .user-search-result > div {
+            flex: 1;
+            min-width: 120px;
+            word-break: break-word;
+        }
+        .tooltip {
+            position: absolute;
+            background-color: #333;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            z-index: 100;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+            white-space: nowrap;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #main {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            min-height: 80vh;
+        }
+        #userListContainer {
+            flex-basis: 30%;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+        #searchUserInput {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ff8623;
+            margin-bottom: 10px;
+            background-color: #333;
+            color: white;
+        }
+        @media (min-width: 768px) {
+            #searchUserInput {
+                min-width: 320px;
+            }
+        }
+        .user:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .user {
+            border-radius: 8px;
+            padding: 5px;
+            cursor: pointer;
+        }
+        .user-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            background-color: #333;
+            color: white;
+        }
+        .user-item:hover {
+            background-color: #ff8623;
+        }
+        .user-avatar {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+        .user-info {
+            flex-grow: 1;
+        }
+        .user-email {
+            font-weight: bold;
+        }
+        .user-bio {
+            color: #ccc;
+        }
+        #chatSection {
+            display: flex;
+            flex-direction: column;
+            flex-basis: 65%;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+            min-height: 90vh;
+        }
+        #messages {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background: none;
+            display: flex;
+            flex-direction: column;
+            border-radius: 8px;
+        }
+        #chatInput {
+            padding: 10px;
+            border-top: 1px solid #ccc;
+        }
+        #userEmailDisplay {
+            background-color: #ff8623;
+            color: white;
+            border-radius: 10px;
+            padding: 10px;
+        }
+        .message {
+            margin: 5px 0;
+            padding: 10px;
+            border-radius: 8px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .my-message {
+            align-self: flex-end;
+            background-color: #ff8623;
+            color: white;
+        }
+        .other-message {
+            align-self: flex-start;
+            background-color: #7378c5;
+            color: white;
+        }
+        #chatInput {
+            padding: 10px;
+            border-top: 1px solid #ccc;
+        }
+        #messageInput {
+            flex-grow: 1;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ff8623;
+            background-color: #333;
+            color: white;
+            width: 100%;
+        }
+        #sendButton {
+            padding: 10px 20px;
+            border-radius: 5px;
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #sendButton:hover {
+            background-color: #7f4caf;
+        }
+        #main {
+            display: flex;
+            justify-content: space-between;
+            align-items: stretch;
+            min-height: 80vh;
+            gap: 20px;
+        }
+        #userListContainer {
+            flex: 1;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+        #chatSection {
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            color: white;
+            padding: 20px;
+        }
+        @media (max-width: 900px) {
+            #main {
+                flex-direction: column;
+                align-items: center;
+                width: 100%;
+                margin-left: 0;
+            }
+            #userListContainer, #chatSection {
+                width: 90% !important;
+                margin: 0 auto;
+                max-width: 100% !important;
+                display: flex;
+                flex-direction: column;
+            }
+            #userList {
+                max-height: 300px;
+                overflow-y: auto;
+            }
+            #chatSection {
+                width: 100% !important;
+                flex-grow: 1;
+            }
+            #noUserSelected {
+                width: 90% !important;
+                flex-grow: 1;
+            }
+        }
+        .selected-user {
+            background-color: #ff8623;
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <main id="main" style="margin-bottom: 20px">
+        <div id="userListContainer">
+            <div id="searchContainer">
+                <input type="text" id="searchUserInput" placeholder="Search for a user" style="font: inherit" />
+            </div>
+            <div id="searchUserResults"></div>
+            <h3>Recent & Suggested Chats</h3>
+            <div id="userList"></div>
+        </div>
+        <div id="chatSection">
+            <div id="userEmailDisplay" style="padding: 10px;"></div>
+            <div id="messages"></div>
+            <div id="chatInput">
+                <input type="text" id="messageInput" placeholder="Type your message" style="font: inherit" />
+                <button id="sendButton">Send</button>
+            </div>
+        </div>
+        <div id="noUserSelected" style="flex-basis: 65%; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; color: white; display: flex; justify-content: center; align-items: center; min-height: 90vh;">
+            <p>Welcome to MovieVerse Chats! Select or find a user to begin chatting with your fellow movie enthusiasts!</p>
+        </div>
+    </main>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
+    </div>
+    <footer id="footer">
+        <p>© 2024 The MovieVerse. All rights reserved.</p>
+    </footer>
+    <script type="module" src="../js/chat.js"></script>
+    <script src="../js/chat-auxiliary.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/chatbot.html b/MovieVerse-Mobile/www/html/chatbot.html
new file mode 100644
index 00000000..c3f9dc5c
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/chatbot.html
@@ -0,0 +1,846 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Chatbot - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html">
+    <meta property="og:title" content="Chatbot - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Chatbot - The MovieVerse">
+    <meta name="twitter:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="manifest" href="../../manifest.json">
+    <script type="importmap">
+        {
+          "imports": {
+            "@google/generative-ai": "https://esm.run/@google/generative-ai"
+          }
+        }
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        #header {
+            margin-top: 26px;
+            padding-left: 25px;
+        }
+        #form {
+            margin-top: -5px;
+            margin-right: 55px;
+        }
+        @media (max-width: 800px){
+            #header {
+                margin-top: 10px;
+            }
+            #form {
+                margin-top: -15px;
+                margin-right: 0;
+            }
+        }
+        @media (min-width: 900px) {
+            #header {
+                margin-top: 26px;
+                padding-left: 25px;
+            }
+            #form {
+                margin-top: 2px;
+            }
+            #my-heading {
+                margin-top: 17px !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #my-heading {
+                margin-top: 9px !important;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        #homepage-header {
+            margin-top: -10px;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+            #homepage-header {
+                margin-top: 10px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="bot-header">
+        <h2 id="search-title">The <span class="highlight1">MovieVerse</span> Assistant</h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+        <h4 id="alt-title" style="font-weight: normal; font-size: 15px; color: #ff8623">Dive deep into the movie world with our expert assistant!</h4>
+    </div>
+    <main id="main" style="padding: 0; margin: 0 auto; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 400px">
+        <div id="chatbotContainer">
+            <div id="chatbotHeader">The MovieVerse Assistant</div>
+            <div id="chatbotBody"></div>
+            <input id="chatbotInput" type="text" placeholder="Ask me about anything..." title="Type your message here"/>
+            <button id="sendButton" title="Send this message">Send</button>
+        </div>
+    </main>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/chatbot.js" type="module"></script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading response...</p>
+    </div>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; color: white; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+            });
+
+            function displaySearchResults(results) {
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+                    details.style.textAlign = 'left';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+    </script>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/christopher-nolan.html b/MovieVerse-Mobile/www/html/christopher-nolan.html
new file mode 100644
index 00000000..2874ec08
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/christopher-nolan.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Director Details - Explore More About Christopher Nolan</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/christopher-nolan.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html">
+    <meta property="og:title" content="Director Details - Christopher Nolan">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Director Details - Christopher Nolan">
+    <meta name="twitter:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" style="margin-left: 25px">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 25px; margin-bottom: -40px">
+
+    </main>
+
+    <div class="details-container" id="director-details-container">
+        <!-- Left side for Director Image -->
+        <div class="director-left" style="overflow: hidden">
+            <h2 id="director-name" class="director-header"></h2>
+            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; overflow: hidden"/>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="director-right" id="director-description">
+            <!-- Director details will be populated here -->
+        </div>
+    </div>
+
+    <script src="../js/christopher-nolan.js"></script>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+
+<script>
+    function getMovieVerseData(input) {
+        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+    }
+
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.log('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    const movieCode = {
+        part1: 'YzVhMjBjODY=',
+        part2: 'MWFjZjdiYjg=',
+        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+    };
+
+    function getMovieCode() {
+        return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+    }
+
+    function generateMovieNames(input) {
+        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+    }
+
+    function fallbackMovieSelection() {
+        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+        localStorage.setItem('selectedMovieId', randomFallbackMovie);
+        window.location.href = 'movie-details.html';
+    }
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const savedBg = localStorage.getItem('backgroundImage');
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+
+            if (savedBg) {
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+            }
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+</script>
+
+</html>
diff --git a/MovieVerse-Mobile/www/html/company-details.html b/MovieVerse-Mobile/www/html/company-details.html
new file mode 100644
index 00000000..f0b6c77c
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/company-details.html
@@ -0,0 +1,795 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Company Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/company-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Company Details - The MovieVerse" />
+    <meta name="description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Company Details - The MovieVerse">
+    <meta name="twitter:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @media (min-width: 800px) {
+            footer {
+                margin-top: 500px;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: 0 !important;
+            }
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 19px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <main id="main" style="margin-left: 25px; height: 0"></main>
+    <div class="details-container" id="company-details-container" style="margin-bottom: 650px">
+        <div class="company-left">
+            <div class="title-logo-container">
+                <h2 id="company-name" class="company-header"></h2>
+                <img id="company-logo" alt="Loading Company Details..." style="z-index: 1000000000; width: 25vw; background-color: #ffffff; border-radius: 8px;"/>
+            </div>
+        </div>
+        <div class="company-right">
+            <p id="company-description" class="company-description"></p>
+            <p><strong>Headquarters:</strong> <span id="company-headquarters"></span></p>
+            <p><strong>Country:</strong> <span id="company-country"></span></p>
+            <p><strong>Website:</strong> <a id="company-website" href="" target="_blank"></a></p>
+            <p style="text-align: center"><strong>Produced Movies:</strong></p>
+            <div style="text-align: center" id="company-movies-list" class="movies-list"></div>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 250px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/company-details.js"></script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('company-logo').addEventListener('click', function() {
+            const imageUrl = this.src.replace('w500', 'original');
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/create-account.html b/MovieVerse-Mobile/www/html/create-account.html
new file mode 100644
index 00000000..ad374615
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/create-account.html
@@ -0,0 +1,1052 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Create Account - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html">
+    <meta property="og:title" content="Create Account - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Create Account - The MovieVerse">
+    <meta name="twitter:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="theme-color" content="#7378c5">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .account-creation-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .account-creation-form-container input[type="email"],
+        .account-creation-form-container input[type="password"],
+        .account-creation-form-container input[type="text"],
+        .account-creation-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .account-creation-form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+        .account-creation-form-container button:hover {
+            background-color: #22254b;
+            color: white;
+        }
+        .account-creation-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .account-creation-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+        #back-to-sign-in {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #back-to-sign-in:hover {
+            background-color: #22254b;
+            color: white;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0;
+            }
+        }
+        #local-time {
+            transform: translateX(12%);
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="account-creation-form-container" id="account-creation-form-container" style="margin-bottom: 300px">
+        <form id="createAccountForm">
+            <h2>Create Account</h2>
+            <p style="color: black">Create an account to personalize your movie recommendations, save  <a style="text-decoration: underline" id="githubLink1" href="favorites.html">favorites</a>, and enhance your movie discovery experience.</p>
+            <input type="email" id="newEmail" placeholder="Email" required>
+            <input type="password" id="newPassword" placeholder="Password" required>
+            <input type="password" id="confirmPassword" placeholder="Re-type Password" required>
+            <label style="margin-top: 10px; margin-bottom: 10px">
+                <input type="checkbox" id="togglePassword"> Show Password
+            </label>
+            <button type="submit">Create Account</button>
+            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
+        </form>
+    </div>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('newPassword');
+            const confirmPasswordInput = document.getElementById('confirmPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+                confirmPasswordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+                confirmPasswordInput.type = 'password';
+            }
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script src="../js/create-account.js" type="module"></script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+    </script>
+    <footer style="margin-top: 650px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/director-details.html b/MovieVerse-Mobile/www/html/director-details.html
new file mode 100644
index 00000000..55acbdc4
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/director-details.html
@@ -0,0 +1,835 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Director Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/director-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html">
+    <meta property="og:title" content="Director Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Director Details - The MovieVerse">
+    <meta name="twitter:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        header {
+            margin-top: -5px;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .movie-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .movie-details {
+            width: 100%;
+        }
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="details-container" id="director-details-container" style="margin-top: -50px; margin-bottom: 60px">
+        <!-- Left side for Director Image -->
+        <div class="director-left" style="overflow-y: hidden">
+            <h2 id="director-name" class="director-header"></h2>
+            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
+            <div style="height: 20px"></div>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="director-right" id="director-description">
+            <!-- Director details will be populated here -->
+        </div>
+    </div>
+
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/director-details.js"></script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+
+<script>
+    function getMovieVerseData(input) {
+        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+    }
+
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.log('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    const movieCode1 = {
+        part1: 'YzVhMjBjODY=',
+        part2: 'MWFjZjdiYjg=',
+        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+    };
+
+    function getMovieCode() {
+        return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+    }
+
+    function generateMovieNames(input) {
+        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+    }
+
+    function fallbackMovieSelection() {
+        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+        localStorage.setItem('selectedMovieId', randomFallbackMovie);
+        window.location.href = 'movie-details.html';
+    }
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const savedBg = localStorage.getItem('backgroundImage');
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+
+            if (savedBg) {
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+            }
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+
+    document.getElementById('director-image').addEventListener('click', function() {
+        const imageUrl = this.src.replace('w1280', 'original');
+        const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+        document.getElementById('image-modal').addEventListener('click', function(event) {
+            if (event.target === this) {
+                this.remove();
+            }
+        });
+    });
+</script>
+</html>
diff --git a/MovieVerse-Mobile/www/html/favorites.html b/MovieVerse-Mobile/www/html/favorites.html
new file mode 100644
index 00000000..a679ec41
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/favorites.html
@@ -0,0 +1,1102 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Favorites & Watchlists - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/movie-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Favorites & Watchlists - The MovieVerse" />
+    <meta name="description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <script src="../js/settings.js"></script>
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Favorites & Watchlists - The MovieVerse">
+    <meta name="twitter:description" content="Manage your favorite movies and watch lists on The MovieVerse. Keep track of movies you love and organize your watch lists for future viewing.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <script src="../js/favorites.js" type="module"></script>
+    <link rel="manifest" href="../../manifest.json">
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .watchlist-controls {
+            position: absolute;
+            top: 10px;
+            display: flex;
+            align-items: start;
+            gap: 5px;
+        }
+        .watchlist-controls button {
+            background: none;
+            border: none;
+            color: #ff8623;
+            cursor: pointer;
+            height: 20px;
+            width: 20px;
+            margin-right: 8px;
+            font-size: 18px;
+        }
+        #create-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #edit-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #delete-watchlist-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        .watchlist.pinned .watchlist-controls #pin-btn {
+            color: #7378c5;
+        }
+        .watchlist-controls button:hover {
+            color: #7378c5;
+        }
+        .watchlist-controls button:first-child {
+            order: -1;
+        }
+        .watchlist {
+            position: relative;
+            padding-top: 30px;
+        }
+        .watchlist.pinned {
+            border: 2px solid yellow;
+        }
+        .watchlist-buttons-container {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-left: 0;
+            margin-top: 35px;
+            margin-bottom: 15px;
+        }
+        @media (max-width: 1200px) {
+            #local-time {
+                display: none;
+            }
+        }
+        #button {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        #how-to-use {
+            text-align: center;
+            margin-top: 20px;
+            margin-bottom: 60px;
+        }
+        #how-to-use-btn {
+            background-color: #7378c5;
+            color: white;
+            border-radius: 8px;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font: inherit;
+            cursor: pointer;
+            border: none;
+        }
+        #how-to-use-btn:hover {
+            background-color: #ff8623;
+        }
+        #how-to-use-section {
+            max-width: 400px;
+            margin: 20px auto;
+            padding: 15px;
+            background-color: #7378c5;
+            color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            display: none;
+            transition: height 0.5s ease-in-out;
+            margin-bottom: 240px;
+        }
+        #how-to-use-section:hover {
+            background-color: #6e73bd;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #githubLink3 {
+            color: white !important;
+        }
+        #githubLink3:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -30px; padding-top: 19px">
+        <div id="header-title">
+            <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
+                <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                    The Mo<span class="highlight" id="highlight">vieV</span>erse
+                </a>
+            </h1>
+        </div>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 5px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul id="watchlist-links" style="overflow-y: auto">
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
+    <div class="watchlist-buttons-container">
+        <button id="create-watchlist-btn">Create Watch Lists</button>
+        <button id="edit-watchlist-btn">Edit Watch Lists</button>
+        <button id="delete-watchlist-btn">Delete Watch Lists</button>
+    </div>
+
+    <div id="create-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('create-watchlist-modal')">&times;</span>
+            <h2>Create a Watch List</h2>
+            <form id="create-watchlist-form">
+                <label>Name:</label>
+                <input type="text" id="new-watchlist-name" placeholder="Watchlist's Name" style="font: inherit" required>
+                <div style="height: 20px"></div>
+                <label>Description:</label>
+                <textarea placeholder="Watchlist Description" id="new-watchlist-description" style="font: inherit"></textarea>
+                <button type="submit" id="button" style="display: block; margin-left: auto; color: white; margin-right: auto;">Create</button>
+            </form>
+        </div>
+    </div>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <div id="edit-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('edit-watchlist-modal')">&times;</span>
+            <h2>Edit a Watch List</h2>
+            <form id="edit-watchlist-form">
+                <!-- Dynamically populate this form based on user selection -->
+            </form>
+        </div>
+    </div>
+
+    <div id="delete-watchlist-modal" class="modal" style="z-index: 1000000000">
+        <div class="modal-content">
+            <span class="close-button" title="Close this modal" onclick="closeModal('delete-watchlist-modal')">&times;</span>
+            <h2>Delete Watch Lists</h2>
+            <label>Select watch lists to delete:</label>
+            <form id="delete-watchlist-form">
+                <!-- Dynamically populate this form based on user selection -->
+            </form>
+        </div>
+    </div>
+
+    <div id="watchlists-display-section">
+        <!-- Dynamically populated watch lists will go here -->
+    </div>
+
+    <main id="favorites-main" style="margin-top: 75px; text-align: center"></main>
+    <main id="favorites-main-tv" style="margin-top: 75px; text-align: center"></main>
+
+    <div id="how-to-use">
+        <button id="how-to-use-btn">How to Use</button>
+    </div>
+
+    <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
+        <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
+        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
+        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
+        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
+        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
+        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
+        <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists! 🍿🎬</p>
+    </div>
+
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink3" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" title="Go to top" style="bottom: 90px; right: 10px; z-index: 10012" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">Back to Top</button>
+    <script src="../js/movie-details.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
+        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
+
+        let initialMoviesSelection = [];
+        let initialTVSeriesSelection = [];
+
+        function translateFBC(value) {
+            return atob(value);
+        }
+
+        function getFBConfig1() {
+            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
+            return translateFBC(fbConfig1);
+        }
+
+        function getFBConfig2() {
+            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
+            return translateFBC(fbConfig2);
+        }
+
+        function getFBConfig3() {
+            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
+            return translateFBC(fbConfig3);
+        }
+
+        function getFBConfig4() {
+            const fbConfig4 = "ODAyOTQzNzE4ODcx";
+            return translateFBC(fbConfig4);
+        }
+
+        function getFBConfig5() {
+            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
+            return translateFBC(fbConfig5);
+        }
+
+        const firebaseConfig = {
+            apiKey: getFBConfig1(),
+            authDomain: getFBConfig2(),
+            projectId: "movieverse-app",
+            storageBucket: getFBConfig3(),
+            messagingSenderId: getFBConfig4(),
+            appId: getFBConfig5()
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const db = getFirestore(app);
+
+        async function loadNavWatchlistLinks() {
+            const navList = document.getElementById('watchlist-links');
+            const firstStaticItem = navList.querySelector('li');
+
+            try {
+                showSpinner();
+
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                let watchlists = [];
+
+                if (currentUserEmail) {
+                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+                    const querySnapshot = await getDocs(q);
+                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
+                }
+                else {
+                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+                }
+
+                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
+                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
+
+                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
+
+                let counter = 1;
+
+                watchlists.forEach(watchlist => {
+                    const listItem = document.createElement('li');
+                    listItem.className = 'dynamic';
+                    const link = document.createElement('a');
+                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
+
+                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
+                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
+                        counter++;
+                    }
+                    else {
+                        link.textContent = watchlist.name;
+                    }
+
+                    listItem.appendChild(link);
+                    navList.insertBefore(listItem, firstStaticItem);
+                });
+
+                hideSpinner();
+                assignIdsToWatchlists();
+            }
+            catch (error) {
+                console.error('Error loading watchlists for navigation:', error);
+                hideSpinner();
+            }
+        }
+
+        function assignIdsToWatchlists() {
+            document.querySelectorAll('.watchlist').forEach(watchlist => {
+                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
+                if (!watchlist.id) {
+                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
+    </script>
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/feedback.html b/MovieVerse-Mobile/www/html/feedback.html
new file mode 100644
index 00000000..41e43187
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/feedback.html
@@ -0,0 +1,1107 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feedback - The MovieVerse</title>
+    <meta name="description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them." />
+    <meta property="og:title" content="Feedback - The MovieVerse">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Feedback - The MovieVerse">
+    <meta name="twitter:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .form-container h1 {
+            color: #ff8623;
+        }
+        .form-container input,
+        .form-container textarea,
+        .form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .form-container button[type="submit"]:hover {
+            background-color: #ff8623;
+        }
+        .form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #supportBtn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #supportBtn:hover {
+            background-color: #ff8623;
+        }
+        @media (min-width: 900px) {
+            #my-heading {
+                margin-top: 15px !important;
+            }
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="form-container">
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Feedback</div>
+        <p style="color: black">Noticed a bug? Have a suggestion? Wrong movie information? Or just want to say hi? We'd love to hear from you!</p>
+        <form action="https://formspree.io/f/xqkrbdqd" method="POST">
+            <input type="text" id="name" name="name" placeholder="Your Name" required>
+            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
+            <textarea id="message" name="message" placeholder="Your Feedback" required></textarea>
+            <button type="submit">Send Feedback</button>
+            <p style="color: black">Need immediate assistance? Submit a support request using the link below and we'll get back to you as soon as possible.</p>
+        </form>
+        <button id="supportBtn" onclick="window.location.href='support.html'">Request Support</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        function updateClock() {
+            var now = new Date();
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            hours = hours < 10 ? '0' + hours : hours;
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            var timeString = hours + ':' + minutes;
+            document.getElementById('clock').innerHTML = timeString;
+        }
+
+        setInterval(updateClock, 1000);
+        window.onload = updateClock;
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 200px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/inception.html b/MovieVerse-Mobile/www/html/inception.html
new file mode 100644
index 00000000..897d13a4
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/inception.html
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Details - Explore Inception by Christopher Nolan</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/inception.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/inception.html">
+    <meta property="og:title" content="Movie Details - Explore Inception by Christopher Nolan">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/inception.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/inception.jpg"/>
+    <meta property="og:image:alt" content="Inception Movie Poster">
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Details - Explore Inception by Christopher Nolan">
+    <meta name="twitter:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px">
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 35px; margin-top: 20px">
+
+    </main>
+
+    <div class="details-container" id="movie-details-container">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw"/>
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px"><strong>0.0/5.0</strong></span>
+        </div>
+
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+            <div id="comments-section">
+                <h3>Community Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Toggle Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This Movie</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname" required>
+                            <textarea id="user-comment" placeholder="Your comment" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your ideas!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script src="../js/inception.js"></script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('movie-image').addEventListener('click', function() {
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+
+    <script src="../js/comments.js" type="module"></script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/html/leonardo-dicaprio.html b/MovieVerse-Mobile/www/html/leonardo-dicaprio.html
new file mode 100644
index 00000000..18a4d369
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/leonardo-dicaprio.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Actor Details - Leonardo DiCaprio</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta name="description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html">
+    <meta property="og:title" content="Actor Details - Leonardo DiCaprio">
+    <meta property="og:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Actor Details - Leonardo DiCaprio">
+    <meta name="twitter:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <script src="../js/leonardo-dicarprio.js" defer></script>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            background-image: url("https://movie-verse.com/images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+
+            <div id="search-results" class="search-results"></div>
+
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="genres" style="margin-left: 25px">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+
+    <main id="main" style="margin-left: 25px"></main>
+
+    <div class="details-container" id="actor-details-container">
+        <!-- Left side for Actor Image -->
+        <div class="actor-left" style="overflow: hidden">
+            <h2 id="actor-name" class="actor-header"></h2>
+            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw"/>
+        </div>
+
+        <!-- Right side for Description and Info -->
+        <div class="actor-right" id="actor-description">
+            <!-- Actor details will be populated here -->
+        </div>
+    </div>
+
+    <script src="../js/leonardo-dicarprio.js"></script>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'movie-of-the-day-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'movie-of-the-day-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('actor-image').addEventListener('click', function() {
+            const imageUrl = this.src;
+            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+
+</html>
diff --git a/MovieVerse-Mobile/www/html/movie-details.html b/MovieVerse-Mobile/www/html/movie-details.html
new file mode 100644
index 00000000..bfc4fb00
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/movie-details.html
@@ -0,0 +1,907 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/movie-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html">
+    <meta property="og:title" content="Movie Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Details - The MovieVerse">
+    <meta name="twitter:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        #favorite-btn:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        .favorited:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #movie-details-container {
+                margin-top: -50px;
+            }
+        }
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #rating-header {
+            color: #ffeb3b;
+        }
+        #rating-header:hover {
+            color: #ff8623;
+            transition: 0.2s ease-in;
+        }
+        #movie-details-container {
+            margin-top: 39px;
+        }
+        .movie-left {
+            margin-top: -10px;
+        }
+        @media (max-width: 767px) {
+            #movie-details-container {
+                margin-top: 0;
+            }
+            #form1 {
+                margin-bottom: 39px;
+            }
+            .movie-left {
+                margin-top: -40px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" >
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none; height: 0">
+        <h2 id="search-title"></h2>
+    </div>
+    <main id="main" style="margin-left: 35px; height: 0"></main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
+            <div id="comments-section">
+                <h3>Movie Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Toggle Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal" style="z-index: 100005">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This Movie</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
+                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right" style="position: relative; overflow: hidden">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: -20px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/movie-details.js"></script>
+    <script src="../js/add-to-favorites.js" type="module"></script>
+    <script type="module">
+        import { toggleFavorite, checkAndUpdateFavoriteButton } from '../js/add-to-favorites.js';
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const favoriteBtn = document.getElementById('favorite-btn');
+            if (favoriteBtn) {
+                favoriteBtn.addEventListener('click', toggleFavorite);
+            }
+        });
+
+        checkAndUpdateFavoriteButton();
+    </script>
+    <script type="module">
+        import { loadUserRatings, updateAverageMovieRating } from '../js/ratings-module.js';
+
+        document.addEventListener('DOMContentLoaded', async () => {
+            const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+            const savedRatings = await loadUserRatings(currentUserEmail);
+            const movieId = localStorage.getItem('selectedMovieId');
+            const movieRating = savedRatings[movieId] || 0;
+            setStarRating(movieRating);
+        });
+
+        function setStarRating(rating) {
+            const stars = document.querySelectorAll('.rating .star');
+            stars.forEach(star => {
+                star.style.color = star.dataset.value > rating ? 'white' : 'gold';
+            });
+            document.getElementById('rating-value').textContent = `${rating}.0/5.0`;
+        }
+
+        let isHovering = false;
+
+        const stars = document.querySelectorAll('.rating .star');
+        stars.forEach(star => {
+            star.addEventListener('mouseover', (e) => {
+                isHovering = true;
+                setStarRating(e.target.dataset.value);
+            });
+
+            star.addEventListener('mouseout', () => {
+                isHovering = false;
+                setTimeout(() => {
+                    if (!isHovering) {
+                        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                        loadUserRatings(currentUserEmail).then(savedRatings => {
+                            const movieId = localStorage.getItem('selectedMovieId');
+                            const movieRating = savedRatings[movieId] || 0;
+                            setStarRating(movieRating);
+                        });
+                    }
+                }, 10);
+            });
+
+            star.addEventListener('click', async (e) => {
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                const movieId = localStorage.getItem('selectedMovieId');
+                const rating = e.target.dataset.value;
+                await updateAverageMovieRating(currentUserEmail, movieId, rating);
+                window.location.reload();
+            });
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <script>
+        document.getElementById('movie-image').addEventListener('click', function() {
+            let imageUrl = this.src.replace('w780', 'original');
+            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                            </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+    <script src="../js/comments.js" type="module"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/movie-match.html b/MovieVerse-Mobile/www/html/movie-match.html
new file mode 100644
index 00000000..6d4e0045
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/movie-match.html
@@ -0,0 +1,854 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Match - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html">
+    <meta property="og:title" content="Movie Match - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Match - The MovieVerse">
+    <meta name="twitter:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #search {
+            margin-top: -1px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px; margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <main id="movie-match-main" style="margin-bottom: 45vh">
+        <div class="movie-match-container">
+            <h2 id="search-title1">Find Your Movie Match</h2>
+            <form id="movie-match-form">
+                <label for="mood">Select Your Mood:</label>
+                <select id="mood">
+                    <option value="happy">Happy</option>
+                    <option value="sad">Sad</option>
+                    <option value="angry">Scary</option>
+                    <option value="adventurous">Adventurous</option>
+                    <option value="romantic">Romantic</option>
+                    <option value="thoughtful">Thoughtful</option>
+                </select>
+                <label for="genre">Preferred Genre:</label>
+                <select id="genre">
+                    <option value="action">Action</option>
+                    <option value="comedy">Comedy</option>
+                    <option value="drama">Drama</option>
+                    <option value="sci-fi">Sci-Fi</option>
+                    <option value="romance">Romance</option>
+                </select>
+                <label for="period">Time Period:</label>
+                <select id="period">
+                    <option value="2020s">2020s</option>
+                    <option value="2010s">2010s</option>
+                    <option value="2000s">2000s</option>
+                    <option value="90s">90s</option>
+                    <option value="80s">80s</option>
+                </select>
+                <input type="submit" value="Get Matched Movie">
+            </form>
+        </div>
+    </main>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script src="../js/movie-match.js"></script>
+    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.error("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.error('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.error('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.error('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script>
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <footer style="margin-top: 0">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/movie-timeline.html b/MovieVerse-Mobile/www/html/movie-timeline.html
new file mode 100644
index 00000000..c59d916d
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/movie-timeline.html
@@ -0,0 +1,806 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Movie Timeline - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/actor-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html">
+    <meta property="og:title" content="Movie Timeline - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Movie Timeline - The MovieVerse">
+    <meta name="twitter:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #search {
+            margin-top: -1px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        #footer {
+            margin-top: 700px
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+            #footer {
+                margin-top: 20px;
+            }
+        }
+    </style>
+
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .load-more-container {
+            width: 100%;
+            text-align: center;
+            margin-top: 20px;
+        }
+        .load-more-container button {
+            margin: 10px auto;
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            transition: background-color 0.3s ease;
+        }
+        .load-more-container button:hover {
+            background-color: #ff8623;
+        }
+        #ad-container2 {
+            display: none;
+        }
+        @media (max-width: 768px) {
+            #ad-container2 {
+                display: block;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -20px; margin-top: -5px" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+
+    <div class="timeline-container" style="margin-bottom: 300px">
+        <div class="center-container">
+            <div style="font-weight: bold; font-size: 27px" id="select-text">Select a Period</div>
+            <div class="year-input-container">
+                <input type="number" id="start-year" class="year-input" title="Enter any year from 1900 until now" placeholder="Start Year" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
+                <input type="number" id="end-year" class="year-input" placeholder="End Year" title="Enter any year from 1900 until now" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
+                <button id="load-movies" onclick="updateMovies()" title="Get Movies in the Chosen Period!">Get Movies in This Period</button>
+            </div>
+            <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
+        </div>
+        <div class="center-container1" id="center-container1">
+            <main id="results" style="scroll-behavior: smooth">
+                <!-- Movies will be dynamically loaded here -->
+            </main>
+        </div>
+    </div>
+
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 255px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 220px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 185px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 150px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 115px; z-index: 10012; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 10012">Back To Top</button>
+
+    <script src="../js/movie-timeline.js"></script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" id="back-top">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('back-top').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+    </script>
+
+    <footer id="footer">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+</body>
+
+</html>
diff --git a/MovieVerse-Mobile/www/html/movies-list.hbs b/MovieVerse-Mobile/www/html/movies-list.hbs
new file mode 100644
index 00000000..8bdfc1c8
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/movies-list.hbs
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Movies List</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    .movie {
+      margin-bottom: 20px;
+    }
+    .movie-title {
+      font-weight: bold;
+    }
+    .movie-year {
+      font-style: italic;
+    }
+    .movie-description {
+      margin-top: 5px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Movies List</h1>
+  {{#each movies}}
+    <div class="movie">
+      <div class="movie-title">{{this.title}}</div>
+      <div class="movie-year">Released in: {{this.year}}</div>
+      <div class="movie-description">{{this.description}}</div>
+    </div>
+  {{/each}}
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/notifications.html b/MovieVerse-Mobile/www/html/notifications.html
new file mode 100644
index 00000000..5aeeaee8
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/notifications.html
@@ -0,0 +1,1329 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Notifications - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Notifications - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations.">
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html" />
+    <meta property="og:site_name" content="Notifications - The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Notifications - The MovieVerse">
+    <meta name="twitter:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations." />
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0 !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        main {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: flex-start;
+            gap: 20px;
+            padding: 20px;
+        }
+        section {
+            flex: 1 1 calc(33% - 40px);
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 100%;
+        }
+        @media (max-width: 1200px) {
+            section {
+                flex: 1 1 calc(50% - 40px);
+            }
+        }
+        @media (max-width: 768px) {
+            main {
+                flex-direction: column;
+            }
+            section {
+                flex-basis: 100%;
+            }
+        }
+        ul {
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            list-style-type: none;
+        }
+        li {
+            width: 100%;
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #ecf0f1;
+            border-left: 5px solid #2980b9;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        h2 {
+            margin-bottom: 10px;
+        }
+        li:hover {
+            background-color: #e1e3e4;
+            cursor: pointer;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #movie-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #actor-link {
+            color: black;
+        }
+        #director-link {
+            color: black;
+        }
+        #actor-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #director-link:hover {
+            cursor: pointer;
+            text-decoration: underline !important;
+            color: #ff8623 !important;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: 0 !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li style="background: none; border: none; box-shadow: none"><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#newFeatures">New Features</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#newReleases">New Releases</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#tipsTricks">Tips & Tricks</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#popularActors">Popular Actors</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="#popularDirectors">Popular Directors</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="sign-in.html">Sign In</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="user-profile.html">Profile</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="feedback.html">Submit Feedback</a></li>
+            <li style="background: none; border: none; box-shadow: none"><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main>
+        <section id="newFeatures">
+            <h2 style="cursor: pointer">New Features</h2>
+            <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
+            <ul>
+                <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Improved Chatbot:</strong> Get personalized movie recommendations and insightful answers to your questions with our smarter chatbot.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Chat Feature:</strong> Join the conversation! Chat with fellow film fans in real-time to share your passion and discover new favorites.</li>
+                <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>Improved Recommendations:</strong>  Unlock a world of movies tailored just for you. Our enhanced engine suggests films based on your unique tastes and viewing habits.</li>
+                <li><i style="margin-right: 3px" class="fas fa-users"></i> <strong>User Profile Search:</strong>  Connect with your friends and discover their movie tastes. Search for user profiles and see what they're watching.</li>
+                <li><i style="margin-right: 3px" class="fas fa-user-plus"></i> <strong>Follow Other Users:</strong> Never miss a beat! Follow your friends to stay up-to-date on their latest movie discoveries and recommendations.</li>
+                <li><i style="margin-right: 3px" class="fas fa-share-alt"></i> <strong>Share Watch Lists:</strong> Spread the cinematic love! Create and share custom watch lists with friends and family, showcasing your curated collection of must-see films.</li>
+            </ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="newReleases">
+            <h2 style="cursor: pointer">New Releases</h2>
+            <h3>Since Your Last Visit</h3>
+            <ul id="releasesSinceLastVisit"></ul>
+            <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
+            <ul id="releasesThisMonth"></ul>
+            <h3 style="margin-top: 35px">Since the Beginning of This Year</h3>
+            <ul id="releasesThisYear"></ul>
+            <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
+            <p style="color: black; margin-top: 0"> You can always view more recommended movies in your recommended list in <a id="githubLink1" href="../../index.html#recommendedDIV">your recommended movies section</a>.</p>
+            <ul id="recommendedReleases"></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="tipsTricks">
+            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
+            <ul>
+                <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
+                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Engaging with the Community:</strong> Dive into vibrant discussions, share your insights, and connect with other film enthusiasts.</li>
+                <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Exploring Indie Films:</strong>  Unearth hidden cinematic treasures and broaden your horizons with our curated selection of independent films.</li>
+                <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>Rating Movies:</strong> Your voice matters! Share your opinions by rating movies and TV shows, helping us refine our recommendations for you and others.</li>
+                <li><i style="margin-right: 3px" class="fas fa-robot"></i> <strong>Chatting with the Chatbot:</strong> Need a movie suggestion or want to test your film trivia knowledge? Our friendly chatbot is always ready to entertain and inform.</li>
+                <li><i style="margin-right: 3px" class="fas fa-cloud"></i> <strong>Cloud Syncing:</strong> Your movie preferences follow you wherever you go. Enjoy seamless access to your watchlists and favorites across all your devices.</li>
+            </ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="popularActors">
+            <h2 style="cursor: pointer">Popular Actors</h2>
+            <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
+            <ul></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+        <section id="popularDirectors">
+            <h2 style="cursor: pointer">Popular Directors</h2>
+            <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
+            <ul></ul>
+            <p style="color: black; margin-top: 35px">
+                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
+            </p>
+        </section>
+    </main>
+    <script src="../js/notifications.js"></script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        document.getElementById('newFeatures').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('newReleases').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularActors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const updateDateElements = document.querySelectorAll('.updateDate');
+            const today = new Date();
+            const options = { year: 'numeric', month: 'long', day: 'numeric' };
+            const formattedDate = today.toLocaleDateString('en-US', options);
+            const formattedDateISO = today.toISOString().split('T')[0];
+
+            updateDateElements.forEach(element => {
+                element.textContent = formattedDate;
+                element.setAttribute('datetime', formattedDateISO);
+            });
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script>
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        let today = new Date();
+        today.setFullYear(today.getFullYear() - 18);
+        let year = today.getFullYear();
+        let month = (today.getMonth() + 1).toString().padStart(2, '0');
+        let day = today.getDate().toString().padStart(2, '0');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+
+    <footer style="margin-top: 20px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/offline.html b/MovieVerse-Mobile/www/html/offline.html
new file mode 100644
index 00000000..3ab9890e
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/offline.html
@@ -0,0 +1,798 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>You're Offline - The MovieVerse</title>
+    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/offline.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:title" content="You're Offline - The MovieVerse">
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/offline.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="You're Offline - The MovieVerse">
+    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body class="movie-details-body">
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="center-text" style="padding: 150px;">
+        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">You're Offline</div>
+        <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
+        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <footer style="margin-top: 500px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/privacy-policy.html b/MovieVerse-Mobile/www/html/privacy-policy.html
new file mode 100644
index 00000000..f40bf2dc
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/privacy-policy.html
@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Privacy Policy - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta property="og:title" content="Privacy Policy - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Privacy Policy - The MovieVerse">
+    <meta name="twitter:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <meta name="theme-color" content="#7378c5">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        .content-area {
+            margin: 0 auto;
+            max-width: 800px;
+            padding: 0;
+            text-align: center;
+        }
+        #linkWeb {
+            color: white;
+        }
+        #linkWeb:hover {
+            color: #ff8623;
+            text-decoration: underline;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+                margin-top: 10px;
+            }
+        }
+        @media (min-width: 900px) {
+            header {
+                margin-top: 4px !important;
+            }
+        }
+        header {
+            margin-top: -5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        h2 {
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+            #form1 {
+                margin-top: 5px !important;
+            }
+        }
+        #form1 {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -20px; margin-top: -5px !important;" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='https://movie-verse.com'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#introduction">Introduction</a></li>
+            <li><a href="#consent">Consent</a></li>
+            <li><a href="#subheading2">Information We Collect</a></li>
+            <li><a href="#subheading">How We Use Your Information</a></li>
+            <li><a href="#subheading3">Log Files</a></li>
+            <li><a href="#subheading4">Cookies and Web Beacons</a></li>
+            <li><a href="terms-of-service.html">Terms of Service</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main class="content-area" style="text-align: center">
+        <div style="text-align: center; width: 90%; margin-top: 25px">
+            <div style="font-weight: bold; font-size: 30px" id="privacy-header">Privacy Policy</div>
+        </div>
+        <div id="introduction" style="text-align: center; width: 90%">
+            <h2 style="cursor: pointer">Introduction</h2>
+            <p>At The MovieVerse, accessible from <a id="linkWeb" href="https://movie-verse.com">https://movie-verse.com</a>, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by The MovieVerse and how we use it.</p>
+        </div>
+        <div id="consent" style="text-align: center; width: 90%">
+            <h2 style="cursor: pointer">Consent</h2>
+            <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms. For our Terms and Conditions, please visit the <a id="linkWeb" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">Terms and Conditions</a> page.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading2">
+            <h2 style="cursor: pointer">Information we collect</h2>
+            <p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
+            <p>If you contact us directly, we may receive additional information about you such as your name, email address, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
+        </div>
+        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading">
+            <h2 style="cursor: pointer">How we use your information</h2>
+            <p>We use the information we collect in various ways, including to:</p>
+            <ul style="color: white; list-style: none; width: 90%">
+                <li>1. Provide, operate, and maintain our website</li>
+                <li>2. Improve, personalize, and expand our website</li>
+                <li>3. Understand and analyze how you use our website</li>
+                <li>4. Develop new products, services, features, and functionality</li>
+                <li>5. Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
+                <li>6. Send you emails</li>
+                <li>7. Find and prevent fraud</li>
+                <li>8. Log Files</li>
+            </ul>
+        </div>
+        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading3">
+            <h2 style="cursor: pointer">Log Files</h2>
+            <p>The MovieVerse follows a standard procedure of using log files.</p>
+            <p>These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics.</p>
+            <p>These are not linked to any information that is personally identifiable.</p>
+            <p>The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
+        </div>
+        <div style="text-align: center; margin-bottom: 300px; width: 90%; cursor: pointer" id="subheading4">
+            <h2 style="cursor: pointer">Cookies and Web Beacons</h2>
+            <p>Like any other website, The MovieVerse uses 'cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited.</p>
+            <p>The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
+            <p>We may analyze user behavior through the use of cookies and web beacons with Google Analytics. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. We partner with Google to use the data collected to track and monitor the use of our website.</p>
+            <p>For more general information on cookies, please read <a id="linkWeb" href="https://www.cookieconsent.com/what-are-cookies/">"What Are Cookies"</a>.</p>
+        </div>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script src="../js/privacy-policy.js"></script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/profile.ejs b/MovieVerse-Mobile/www/html/profile.ejs
new file mode 100644
index 00000000..9fd52920
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/profile.ejs
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Profile</title>
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/profile">Profile</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <section class="profile-container">
+        <h1>User Profile</h1>
+        <% if (user) { %>
+            <div class="profile-info">
+                <img src="<%= user.avatar %>" alt="Profile Avatar" class="profile-avatar">
+                <h2><%= user.name %></h2>
+                <p>Email: <%= user.email %></p>
+                <p>Location: <%= user.location %></p>
+                <p>Member since: <%= user.createdAt %></p>
+                <p>Favorite Movies:</p>
+                <ul>
+                    <% user.favoriteMovies.forEach(movie => { %>
+                        <li><%= movie.title %></li>
+                    <% }) %>
+                </ul>
+                <p>Favorite Genres:</p>
+                <ul>
+                    <% user.favoriteGenres.forEach(genre => { %>
+                        <li><%= genre %></li>
+                    <% }) %>
+                </ul>
+                <p>Favorite Actors:</p>
+                <ul>
+                    <% user.favoriteActors.forEach(actor => { %>
+                        <li><%= actor.name %></li>
+                    <% }) %>
+                </ul>
+                <p>
+                    <a href="/profile/edit">Edit Profile</a>
+                </p>
+            </div>
+        <% } else { %>
+            <p>User not found.</p>
+        <% } %>
+    </section>
+</main>
+<footer>
+    <p>&copy; 2024 The MovieVerse. All rights reserved.</p>
+</footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/reset-password.html b/MovieVerse-Mobile/www/html/reset-password.html
new file mode 100644
index 00000000..3727e104
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/reset-password.html
@@ -0,0 +1,1097 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Reset Password - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html">
+    <meta property="og:title" content="Reset Password - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Reset Password - The MovieVerse">
+    <meta name="twitter:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        .password-reset-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+
+        .password-reset-form-container input[type="email"],
+        .password-reset-form-container input[type="password"],
+        .password-reset-form-container input[type="text"],
+        .password-reset-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+
+        #local-time {
+            transform: translateX(12%);
+        }
+
+        .password-reset-form-container button[type="submit"],
+        .password-reset-form-container button[type="button"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .password-reset-form-container button:hover {
+            background-color: #22254b;
+            color: white;
+        }
+
+        .password-reset-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .password-reset-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+
+        .skiptranslate {
+            color: white !important;
+        }
+
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+
+        #my-heading {
+            margin-top: 24px !important;
+        }
+
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+
+    <div class="password-reset-form-container" id="password-reset-form-container" style="margin-bottom: 300px">
+        <form id="resetPasswordForm">
+            <h2>Reset Password</h2>
+            <p style="color: black">Forgot your password? No worries! Enter your email to verify your account and reset your password.</p>
+            <input type="email" id="resetEmail" placeholder="Enter your email" required>
+            <button type="submit">Verify Account</button>
+            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
+        </form>
+        <div id="newPasswordFields" style="display: none;">
+            <p style="color: black">Great news! Your account has been verified. Now, enter and confirm your new password below.</p>
+            <input type="password" id="newPassword" placeholder="New Password" required>
+            <input type="password" id="confirmNewPassword" placeholder="Confirm New Password" required>
+            <div style="margin-top: 10px; margin-bottom: 10px">
+                <label>
+                    <input type="checkbox" id="togglePassword"> Show Password
+                </label>
+            </div>
+            <button type="button" id="updatePasswordButton">Update Password</button>
+        </div>
+    </div>
+
+    <footer style="margin-top: 750px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <script src="../js/reset-password.js" type="module"></script>
+
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('newPassword');
+            const confirmPasswordInput = document.getElementById('confirmNewPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+                confirmPasswordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+                confirmPasswordInput.type = 'password';
+            }
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+    </script>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/html/search.html b/MovieVerse-Mobile/www/html/search.html
new file mode 100644
index 00000000..683f51f8
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/search.html
@@ -0,0 +1,921 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
+<head>
+    <meta charset="UTF-8">
+    <title>Search Results - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:title" content="Search Results - The MovieVerse">
+    <meta property="og:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/search.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/search.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Search Results - The MovieVerse">
+    <meta name="twitter:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <script src="../js/search.js"></script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #local-time {
+            margin-left: 5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #ad-container {
+            display: block !important;
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -50px; margin-top: -5px" id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px" class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <main id="movie-match-main" style="margin-top: 10px; margin-bottom: 150px">
+        <h2 id="search-results-label">Search Results</h2>
+        <div class="category-buttons">
+            <button data-category="movie" onclick="showResults('movie')">Movies</button>
+            <button data-category="tv" onclick="showResults('tv')">TV Series</button>
+            <button data-category="person" onclick="showResults('person')">People</button>
+        </div>
+        <button id="toggle-filters-btn">Filter & Sort Results</button>
+        <!-- Filters for Movies -->
+        <div id="movie-tv-filters" style="display: none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="genre-filter">Genre:</label>
+            <select id="genre-filter">
+                <option value="">Select Genre</option>
+                <!-- Populated with genres -->
+            </select>
+            <label for="language-filter">Language:</label>
+            <select id="language-filter">
+                <option value="">Select Language</option>
+            </select>
+            <label for="year-filter">Year:</label>
+            <input type="number" id="year-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
+            <label style="vertical-align: center" for="rating-filter">Rating:</label>
+            <input type="range" id="rating-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
+            <span id="rating-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-movie"><strong>Sort by:</strong></label>
+            <select id="sort-movie" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
+        </div>
+        <!-- Filters for TV Series -->
+        <div id="tv-filters" style="display: none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="genre-tv-filter">Genre:</label>
+            <select id="genre-tv-filter">
+                <option value="">Select Genre</option>
+                <!-- Populated with genres -->
+            </select>
+            <label for="language-tv-filter">Language:</label>
+            <select id="language-tv-filter">
+                <option value="">Select Language</option>
+            </select>
+            <label for="year-tv-filter">Year:</label>
+            <input type="number" id="year-tv-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
+            <label style="vertical-align: center" for="rating-tv-filter">Rating:</label>
+            <input type="range" id="rating-tv-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
+            <span id="rating-tv-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-tv"><strong>Sort by:</strong></label>
+            <select id="sort-tv" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
+        </div>
+        <!-- Filters for People -->
+        <div id="people-filters" style="display:none;">
+            <p style="font-weight: bold">Filters Search Results</p>
+            <label for="profession-filter">Profession:</label>
+            <select id="profession-filter">
+                <option value="">Select Profession</option>
+                <option value="Acting">Acting</option>
+                <option value="Directing">Directing</option>
+            </select>
+            <label for="gender-filter">Gender:</label>
+            <select id="gender-filter">
+                <option value="">Select Gender</option>
+                <option value="2">Male</option>
+                <option value="1">Female</option>
+            </select>
+            <label for="popularity-filter">Popularity Score:</label>
+            <input type="range" id="popularity-filter" min="0" max="100" step="1" value="5" title="Popularity" />
+            <span id="popularity-value" style="color: white; font: inherit"></span>
+            <button id="reset-filters">Reset Filters</button>
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+            <label for="sort-people"><strong>Sort by:</strong></label>
+            <select id="sort-people" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+            </select>
+        </div>
+        <div id="movie-match-container1" class="movie-match-container1">
+            <main id="results"></main>
+        </div>
+    </main>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" style="bottom: 90px; right: 10px; z-index: 10012" title="Back to top">Back to Top</button>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 10012" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w300${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+                'back-to-top-btn'
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                    'back-to-top-btn'
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/settings.html b/MovieVerse-Mobile/www/html/settings.html
new file mode 100644
index 00000000..3780f1f0
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/settings.html
@@ -0,0 +1,1231 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>App Settings - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/settings.html">
+    <meta property="og:title" content="App Settings - The MovieVerse">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/settings.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.webp"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="App Settings - The MovieVerse">
+    <meta name="twitter:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.webp"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .settings-container {
+            text-align: center;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .settings-section {
+            margin-bottom: 30px;
+            width: 80%;
+            max-width: 500px;
+        }
+        .settings-section select,
+        .settings-section input[type="color"] {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: 2px solid #7378c5;
+            background-color: #22254b;
+            color: white;
+            font-size: 16px;
+            margin-top: 10px;
+        }
+        .settings-section h2 {
+            color: #ff8623;
+            margin-bottom: 10px;
+        }
+        .settings-section label {
+            font-size: 20px;
+            color: #ff8623;
+            display: block;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #reset-button {
+            display: block;
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            font-size: 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            margin: 20px auto;
+        }
+        #reset-button:hover {
+            background-color: #7378c5;
+            transition: background-color 0.3s ease;
+        }
+        #search-results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            margin-left: 25px;
+        }
+        #search-title {
+            margin: 0;
+        }
+        .button-group button {
+            background-color: #ff8623;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            font-size: 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        .button-group button:hover {
+            background-color: #7378c5;
+            transition: background-color 0.3s ease;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            #heading {
+                margin-top: -5px;
+            }
+            #my-heading {
+                margin-top: 25px !important;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .image-container {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+            background-color: #7378c5;
+            text-align: center;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            cursor: pointer;
+        }
+        .image-container:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        .image-container img {
+            margin-left: 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: transform 0.2s;
+        }
+        .image-container img:hover {
+            transform: scale(1.1);
+        }
+        .image-container input[type="checkbox"] {
+            margin-right: 10px;
+        }
+        .image-name {
+            margin-left: 10px;
+            font-size: 1rem;
+            color: #fff;
+        }
+        #delete-selected-images-btn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            display: inline-block;
+            font: inherit;
+            margin: 20px auto;
+        }
+        #delete-selected-images-btn:hover {
+            background-color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="heading">
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 5px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <main id="settings-container" class="settings-container" style="margin-bottom: 50px">
+        <!-- Background Setting -->
+        <div class="settings-section">
+            <h2>Change App Background</h2>
+            <select id="background-select" style="font: inherit">
+                <option style="font: inherit" value="../../images/universe-1.webp">Default</option>
+                <option style="font: inherit" value="../../images/universe-2.webp">Universe 1</option>
+                <option style="font: inherit" value="../../images/universe-22.webp">Universe 2</option>
+                <option style="font: inherit" value="../../images/universe-3.webp">Universe 3</option>
+                <option style="font: inherit" value="../../images/universe-4.webp">Universe 4</option>
+                <option style="font: inherit" value="../../images/universe-5.webp">Universe 5</option>
+                <option style="font: inherit" value="../../images/universe-6.webp">Universe 6</option>
+                <option style="font: inherit" value="../../images/universe-7.webp">Universe 7</option>
+                <option style="font: inherit" value="../../images/universe-8.webp">Universe 8</option>
+                <option style="font: inherit" value="../../images/universe-9.webp">Universe 9</option>
+                <option style="font: inherit" value="../../images/universe-10.webp">Universe 10</option>
+                <option style="font: inherit" value="../../images/universe-11.webp">Universe 11</option>
+                <option style="font: inherit" value="../../images/universe-12.webp">Universe 12</option>
+                <option style="font: inherit" value="../../images/universe-13.webp">Universe 13</option>
+                <option style="font: inherit" value="../../images/universe-14.webp">Universe 14</option>
+                <option style="font: inherit" value="../../images/universe-15.webp">Universe 15</option>
+                <option style="font: inherit" value="../../images/universe-16.webp">Universe 16</option>
+                <option style="font: inherit" value="../../images/universe-17.webp">Universe 17</option>
+                <option style="font: inherit" value="../../images/universe-18.webp">Universe 18</option>
+                <option style="font: inherit" value="../../images/universe-19.webp">Universe 19</option>
+                <option style="font: inherit" value="../../images/universe-20.webp">Universe 20</option>
+                <option style="font: inherit" value="../../images/universe-21.webp">Universe 21</option>
+                <option style="font: inherit" value="../../images/universe.webp">Universe 22</option>
+                <option style="font: inherit" value="../../images/universe-23.webp">Universe 23</option>
+                <option style="font: inherit" value="../../images/black.webp">Black</option>
+                <option style="font: inherit" value="../../images/grey.webp">Grey</option>
+                <option style="font: inherit" value="../../images/blue.webp">Blue</option>
+                <option style="font: inherit" value="../../images/silver.webp">Silver</option>
+                <option style="font: inherit" value="../../images/gold.webp">Gold</option>
+                <option style="font: inherit" value="../../images/rose.webp">Rose</option>
+                <option style="font: inherit" value="../../images/pink.webp">Pink</option>
+                <option style="font: inherit" value="../../images/red.webp">Red</option>
+                <option style="font: inherit" value="../../images/green.webp">Green</option>
+                <option style="font: inherit" value="../../images/brown.webp">Brown</option>
+                <option style="font: inherit" value="../../images/purple.webp">Purple</option>
+                <option style="font: inherit" value="../../images/orange.webp">Orange</option>
+                <option style="font: inherit" value="../../images/yellow.webp">Light Yellow</option>
+            </select>
+        </div>
+        <div class="settings-section">
+            <h2>Upload A Custom Background</h2>
+            <input type="file" id="custom-bg-upload" accept="image/*" style="margin-bottom: 10px; padding-left: 10px; font: inherit">
+            <input type="text" id="custom-bg-name" placeholder="Enter image name..." style="margin-bottom: 10px; font: inherit">
+            <div class="button-group">
+                <button id="upload-bg-btn" style="font: inherit">Upload</button>
+                <button id="delete-uploaded-btn" style="font: inherit">Delete Uploaded Images</button>
+            </div>
+        </div>
+        <div class="settings-section" id="delete-images-section" style="display: none;">
+            <h2>Select Images to Delete</h2>
+            <div id="custom-images-container"></div>
+            <button id="delete-selected-images-btn">Delete Selected Images</button>
+        </div>
+        <!-- Text Color Setting -->
+        <div class="settings-section">
+            <h2>Change Text Color</h2>
+            <label for="text-color-input">Text Color:</label>
+            <input type="color" style="min-height: 50px" id="text-color-input">
+        </div>
+        <!-- Font Size Setting -->
+        <div class="settings-section">
+            <h2>Change Font Size</h2>
+            <label style="font: inherit" for="font-size-select">Font Size:</label>
+            <select style="font: inherit" id="font-size-select">
+                <option style="font: inherit" value="small">Small</option>
+                <option style="font: inherit" value="medium" selected>Medium</option>
+                <option style="font: inherit" value="large">Large</option>
+            </select>
+        </div>
+        <button style="font: inherit" id="reset-button">Reset to Defaults</button>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 200px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/settings.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, span, div, button, input, select, textarea').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/sign-in.html b/MovieVerse-Mobile/www/html/sign-in.html
new file mode 100644
index 00000000..40df0ef7
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/sign-in.html
@@ -0,0 +1,1077 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Sign In - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Sign In - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Sign In - The MovieVerse">
+    <meta name="twitter:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+        #local-time {
+            transform: translateX(12%);
+        }
+        .sign-in-form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.75);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .sign-in-form-container h1 {
+            color: black;
+        }
+        .sign-in-form-container p {
+            color: black;
+        }
+        .sign-in-form-container input[type="email"],
+        .sign-in-form-container input[type="password"],
+        .sign-in-form-container input[type="text"],
+        .sign-in-form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .sign-in-form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .sign-in-form-container button[type="button"] {
+            background-color: #f0f0f0;
+            color: #333;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #createAccountBtn:hover {
+            background-color: #d3d3d3;
+            color: #1B1B1B;
+        }
+        .sign-in-form-container button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .sign-in-form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .sign-in-form-container h2 {
+            color: black;
+            margin-bottom: 20px;
+        }
+        header {
+            margin-top: -5px;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1" style="margin-top: 21px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="sign-in-form-container" style="margin-bottom: 390px">
+        <form id="signInForm">
+            <h2>Sign In</h2>
+            <p>Sign in to save your stats, watchlists, get personalized movie recommendation, join our community, and more!</p>
+            <input type="email" id="signInEmail" placeholder="Email" required>
+            <input type="password" id="signInPassword" placeholder="Password" required>
+            <label style="margin-top: 10px; margin-bottom: 10px">
+                <input type="checkbox" id="togglePassword"> Show Password
+            </label>
+            <button type="submit">Sign In</button>
+            <button type="button" id="createAccountBtn">Create an Account</button>
+            <p>Forgot password? Click <a style="text-decoration: underline" id="githubLink1" href="reset-password.html">below</a> to reset it.</p>
+            <button type="button" id="resetPasswordBtn" onclick="window.location.href='reset-password.html'">Reset Password</button>
+        </form>
+    </div>
+    <script>
+        document.getElementById('togglePassword').addEventListener('change', function() {
+            const passwordInput = document.getElementById('signInPassword');
+
+            if (this.checked) {
+                passwordInput.type = 'text';
+            }
+            else {
+                passwordInput.type = 'password';
+            }
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/sign-in.js" type="module"></script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode1 = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+    </script>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/support.html b/MovieVerse-Mobile/www/html/support.html
new file mode 100644
index 00000000..a02e4a31
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/support.html
@@ -0,0 +1,1101 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Support - The MovieVerse</title>
+    <meta name="description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/support.html">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/support.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta property="og:title" content="Support - The MovieVerse">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Support - The MovieVerse">
+    <meta name="twitter:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        .form-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .form-container h1 {
+            color: #ff8623;
+        }
+        .form-container input,
+        .form-container textarea,
+        .form-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .form-container button[type="submit"] {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .form-container button[type="submit"]:hover {
+            background-color: #ff8623;
+        }
+        .form-container form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #supportBtn {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            margin-top: 20px;
+        }
+        #supportBtn:hover {
+            background-color: #ff8623;
+        }
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+        #link {
+            color: white;
+        }
+        #link:hover {
+            color: #ff8623;
+        }
+        @media (min-width: 900px) {
+            #my-heading {
+                margin-top: 15px !important;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+    </style>
+</head>
+<body class="movie-details-body">
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header>
+        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div class="form-container">
+        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Contact Support</div>
+        <p style="color: black">Have a question or need help? Contact us and we'll take a look at your request as soon as possible.</p>
+        <form action="https://formspree.io/f/xdoqzzao" method="POST">
+            <input type="text" id="name" name="name" placeholder="Your Name" required>
+            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
+            <textarea id="message" name="message" placeholder="Your Message" required></textarea>
+            <button type="submit">Send Message</button>
+            <p style="color: black">Have a feedback for us? Or any suggestions to improve our app? Click the button below to be redirected to the feedback page.</p>
+        </form>
+        <button id="supportBtn" onclick="window.location.href='feedback.html'" title="Submit a feedback">Submit Feedback</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+    </script>
+
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+        }
+
+        function updateClock() {
+            var now = new Date();
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            hours = hours < 10 ? '0' + hours : hours;
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            var timeString = hours + ':' + minutes;
+            document.getElementById('clock').innerHTML = timeString;
+        }
+
+        setInterval(updateClock, 1000);
+        window.onload = updateClock;
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+    </script>
+
+    <footer style="margin-top: 400px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/terms-of-service.html b/MovieVerse-Mobile/www/html/terms-of-service.html
new file mode 100644
index 00000000..23daac13
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/terms-of-service.html
@@ -0,0 +1,399 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Terms of Service - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="manifest" href="../../manifest.json">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta property="og:title" content="Terms of Service - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="Terms of Service - The MovieVerse">
+    <meta name="twitter:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        .content-area {
+            margin: 0 auto;
+            max-width: 800px;
+            padding: 0;
+            text-align: center;
+        }
+        #mail {
+            color: white;
+        }
+        #mail:hover {
+            color: #ff8623;
+            text-decoration: underline;
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            header {
+                margin-top: -5px;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        h2 {
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#agreement">Agreement to Terms</a></li>
+            <li><a href="#consent">Changes to Terms</a></li>
+            <li><a href="#subheading2">Use of Service</a></li>
+            <li><a href="#subheading">Content</a></li>
+            <li><a href="#subheading3">Ads</a></li>
+            <li><a href="#subheading4">Accounts</a></li>
+            <li><a href="#subheading5">Intellectual Property</a></li>
+            <li><a href="#subheading6">Links To Other Web Sites</a></li>
+            <li><a href="#subheading7">Termination</a></li>
+            <li><a href="#subheading8">Disclaimer</a></li>
+            <li><a href="#subheading9">Governing Law</a></li>
+            <li><a href="#subheading10">Contact Us</a></li>
+            <li><a href="privacy-policy.html">Privacy Policy</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <main class="content-area">
+        <div style="text-align: center; width: 90%">
+            <div style="font-weight: bold; font-size: 28px; margin-top: 10px; color: #ff8623" id="tos-header">Terms of Service</div>
+        </div>
+        <div style="text-align: center; width: 90%" id="agreement">
+            <h2 style="cursor: pointer">Agreement to Terms</h2>
+            <p>By using The MovieVerse, you agree to be bound by these terms. If you disagree with any part of the terms, then you do not have permission to access the service.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="consent">
+            <h2 style="cursor: pointer">Changes to Terms</h2>
+            <p>We reserve the right to modify or replace these Terms at any time at our sole discretion. We will try to provide at least 30 days' notice prior to any new terms taking effect.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading2">
+            <h2 style="cursor: pointer">Use of Service</h2>
+            <p>The MovieVerse is provided on an "AS IS" and "AS AVAILABLE" basis. The service is for personal, non-commercial use only.</p>
+            <p>You may not use the service for any illegal or unauthorized purpose. You must not, in the use of the service, violate any laws in your jurisdiction.</p>
+            <p>You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the service, use of the service, or access to the service without express written permission by us.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading">
+            <h2 style="cursor: pointer">Content</h2>
+            <p>Content found on or through this Service are the property of The MovieVerse or used with permission. You may not distribute, modify, transmit, reuse, download, repost, copy, or use said Content, whether in whole or in part, for commercial purposes or for personal gain, without express advance written permission from us.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading3">
+            <h2 style="cursor: pointer">Ads</h2>
+            <p>During use of the Service, you may enter into correspondence with or participate in promotions of advertisers or sponsors showing their goods or services through the Service. Any such activity, and any terms, conditions, warranties or representations associated with such activity, is solely between you and the applicable third-party.</p>
+            <p>We display ads on the Service to help us keep our servers and databases running and free for everyone. We're committed to placing non-intrusive ads only, which means no pop-ups, no auto-playing videos, and no ads that interfere with your experience on the site.</p>
+            <p>If you encounter any ads that are inappropriate, misleading, or intrusive, please let us know by contacting us at using the Feedback form <a style="color: white" href="feedback.html">here</a>.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading4">
+            <h2 style="cursor: pointer">Accounts</h2>
+            <p>When you create an account with us, you guarantee that the information you provide us is accurate, complete, and current at all times. Inaccurate, incomplete, or obsolete information may result in the immediate termination of your account on the Service.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading5">
+            <h2 style="cursor: pointer">Intellectual Property</h2>
+            <p>The Service and its original content, features, and functionality are and will remain the exclusive property of The MovieVerse and its licensors.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading6">
+            <h2 style="cursor: pointer">Links To Other Web Sites</h2>
+            <p>Our Service may contain links to third-party web sites or services that are not owned or controlled by The MovieVerse. We have no control over, and assume no responsibility for the content, privacy policies, or practices of any third-party web sites or services.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading7">
+            <h2 style="cursor: pointer">Termination</h2>
+            <p>We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of the Terms.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading8">
+            <h2 style="cursor: pointer">Disclaimer</h2>
+            <p>Your use of the Service is at your sole risk. The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind.</p>
+        </div>
+        <div style="text-align: center; width: 90%" id="subheading9">
+            <h2 style="cursor: pointer">Governing Law</h2>
+            <p>These Terms shall be governed and construed in accordance with the laws of the country where The MovieVerse is based (the United States of America), without regard to its conflict of law provisions.</p>
+            <p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
+        </div>
+        <div style="text-align: center; width: 90%; margin-bottom: 300px" id="subheading10">
+            <h2 style="cursor: pointer">Contact Us</h2>
+            <p>If you have any questions about these Terms, please contact us at <a id="mail" href="mailto:info@movie-verse.com">info@movie-verse.com</a>.</p>
+        </div>
+    </main>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script src="../js/terms-of-service.js"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/trivia.html b/MovieVerse-Mobile/www/html/trivia.html
new file mode 100644
index 00000000..d2bc5201
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/trivia.html
@@ -0,0 +1,1173 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>MovieVerse Trivia - Test Your Movie Knowledge</title>
+    <link rel="stylesheet" href="../css/trivia.css">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html">
+    <meta property="og:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html" />
+    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
+    <meta name="twitter:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        label {
+            cursor: pointer;
+        }
+        label:hover {
+            color: #f509d9;
+        }
+        #my-heading {
+            margin-top: 25px;
+        }
+        @keyframes dropIn {
+            0% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: dropIn 1s ease forwards;
+        }
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 0.5s;
+        }
+        #form {
+            margin-top: 16px;
+        }
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+            #form {
+                margin-top: 0;
+            }
+        }
+        #ad-container1 {
+            display: block;
+        }
+        #githubLink {
+            color: white !important;
+        }
+        #githubLink:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        @media (min-width: 768px) {
+            #my-heading {
+                margin-top: 19px;
+            }
+            #form {
+                margin-top: 10px;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+        .highlight2 {
+            color: orange;
+        }
+        .highlight2:hover {
+            color: #ff8623;
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-bottom: -50px; margin-top: 9px">
+        <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 215px" class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+        <ul style="overflow-y: auto">
+            <li><a href="#0">Question 1</a></li>
+            <li><a href="#1">Question 2</a></li>
+            <li><a href="#2">Question 3</a></li>
+            <li><a href="#3">Question 4</a></li>
+            <li><a href="#4">Question 5</a></li>
+            <li><a href="#5">Question 6</a></li>
+            <li><a href="#6">Question 7</a></li>
+            <li><a href="#7">Question 8</a></li>
+            <li><a href="#8">Question 9</a></li>
+            <li><a href="#9">Question 10</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+    <div>
+        <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
+    </div>
+    <div id="result-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Trivia Results</h3>
+                <span class="close-button" title="Close the trivia results modal">&times;</span>
+            </div>
+            <div id="progress-circle" class="progress-circle">
+                <div id="correct-answers"></div>
+            </div>
+            <p id="result-text"></p>
+        </div>
+    </div>
+    <main id="main"></main>
+    <form id="quiz-form" style="margin-bottom: 50px">
+        <div id="quiz-container"></div>
+        <button type="button" id="regenerate-questions" class="button" style="color: black">Get New Questions</button>
+        <button type="submit" id="submit" class="button" style="color: black">Submit Answers</button>
+    </form>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0; color: white">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="color: white; margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <script src="../js/quiz.js" type="module"></script>
+    <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        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')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+    </script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p id="footerP" style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" id="back-top">
+            <i class="fas fa-arrow-up"></i>
+            <span>Top</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+    <script>
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        function fallbackMovieSelection() {
+            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
+            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+            localStorage.setItem('selectedMovieId', randomFallbackMovie);
+            window.location.href = 'movie-details.html';
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        const movieCode = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+        }
+
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+
+        document.getElementById('back-top').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/tv-details.html b/MovieVerse-Mobile/www/html/tv-details.html
new file mode 100644
index 00000000..6898fd09
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/tv-details.html
@@ -0,0 +1,938 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>TV Series Details - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script src="../js/tv-details.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="TV Series Details - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html" />
+    <meta property="og:site_name" content="The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="TV Series Details - The MovieVerse">
+    <meta name="twitter:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        #rating {
+            color: white !important;
+        }
+        #rating:hover {
+            color: #ff8623 !important;
+        }
+        #favorite-btn:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        .favorited:hover {
+            background-color: #ff8623 !important;
+            transition: background-color 0.3s;
+        }
+        #comment-modal .modal-content {
+            min-width: 400px;
+            margin-top: 0;
+        }
+        #homepage {
+            color: white;
+        }
+        #homepage:hover {
+            color: #ff8623;
+        }
+        #prod-companies {
+            color: white;
+        }
+        #prod-companies:hover {
+            color: #ff8623;
+        }
+        header {
+            margin-top: 9px;
+        }
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+        }
+        @media (min-width: 900px) {
+            #form1 {
+                margin-right: 0;
+            }
+            header {
+                margin-top: -5px;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        .cast-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+        }
+        .cast-member-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            margin: 5px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .cast-member-image {
+            width: 100%;
+            height: 155px;
+            object-fit: cover !important;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .cast-member-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .cast-member-details {
+            width: 100%;
+        }
+        .cast-member-name, .cast-member-role {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+            white-space: normal;
+            text-align: center;
+        }
+        .similar-tv-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+        }
+        .similar-tv-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .similar-tv-item:hover {
+            transform: scale(1.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            cursor: pointer;
+        }
+        .similar-tv-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        .similar-tv-name {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
+        .similar-tv-link {
+            text-decoration: none;
+            color: #333;
+        }
+        #movie-details-container {
+            margin-top: 20px;
+        }
+        @media (max-width: 767px) {
+            #movie-details-container {
+                margin-top: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header style="margin-bottom: -60px">
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
+        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
+        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <form id="form1">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+    </header>
+    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
+        <h2 id="search-title"></h2>
+        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    </div>
+    <main id="main" style="margin-left: 35px; height: 0"></main>
+    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px;">
+        <!-- Left side for Title and Image -->
+        <div class="movie-left">
+            <!-- Container for Title and Favorites Button -->
+            <div class="title-favorites-container">
+                <h2 id="movie-title" class="movie-header"></h2>
+                <button id="favorite-btn">
+                    ❤️
+                </button>
+            </div>
+            <img id="movie-image" alt="Loading TV Series Details..." style="width: 25vw; border-radius: 8px" title="Click to view full-size image" />
+            <h3>Your Rating:</h3>
+            <div class="rating" title="Click on a star to rate this movie!">
+                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
+                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
+                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
+                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
+                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
+            </div>
+            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
+            <div id="comments-section">
+                <h3>TV Show Comments</h3>
+                <div id="comments-container"></div>
+                <!-- Comments Buttons -->
+                <div class="comments-controls">
+                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
+                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
+                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
+                </div>
+                <!-- Comment Modal -->
+                <div id="comment-modal" class="modal">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>Add a Comment for This TV Series</h3>
+                            <span class="close">&times;</span>
+                        </div>
+                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
+                        <form id="comment-form">
+                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
+                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
+                            <button id="post-comment-btn" type="submit" title="Post your comment for this TV series">Post Comment</button>
+                            <p style="font-size: 14px; margin-top: 30px">
+                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right" style="position: relative; overflow: hidden">
+            <p id="movie-description" class="movie-description"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+        </div>
+    </div>
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script src="../js/tv-details.js"></script>
+    <script src="../js/add-to-tv-favorites.js" type="module"></script>
+    <script type="module">
+        import { toggleFavoriteTVSeries, checkAndUpdateFavoriteButtonTVSeries } from '../js/add-to-tv-favorites.js';
+        document.addEventListener('DOMContentLoaded', () => {
+            const favoriteBtn = document.getElementById('favorite-btn');
+            if (favoriteBtn) {
+                favoriteBtn.addEventListener('click', toggleFavoriteTVSeries);
+            }
+        });
+        checkAndUpdateFavoriteButtonTVSeries();
+    </script>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const savedBg = localStorage.getItem('backgroundImage');
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+
+                if (savedBg) {
+                    document.body.style.backgroundImage = `url('${savedBg}')`;
+                }
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        document.getElementById('movie-image').addEventListener('click', function() {
+            let imageUrl = this.src.replace('w780', 'w1280');
+            const modalHtml = `<div id="image-modal" style="z-index: 10000002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                    <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="TV Series Poster" />
+                                    <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
+                               </div>`;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+            document.getElementById('image-modal').addEventListener('click', function(event) {
+                if (event.target === this) {
+                    this.remove();
+                }
+            });
+        });
+    </script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
+    <script src="../js/comments-tv.js" type="module"></script>
+    <footer>
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                } else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/html/user-profile.html b/MovieVerse-Mobile/www/html/user-profile.html
new file mode 100644
index 00000000..98b22596
--- /dev/null
+++ b/MovieVerse-Mobile/www/html/user-profile.html
@@ -0,0 +1,1337 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>User Profile - The MovieVerse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="User Profile - The MovieVerse">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details." />
+    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html" />
+    <meta property="og:site_name" content="User Profile - The MovieVerse" />
+    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
+    <meta property="og:favicon" content="./images/favicon.ico" />
+    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
+    <meta name="author" content="Son Nguyen Hoang">
+    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html">
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <meta http-equiv="content-language" content="en">
+    <meta name="language" content="en">
+    <meta name="theme-color" content="#7378c5">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@MovieVerse" />
+    <meta name="twitter:creator" content="@hoangsonw" />
+    <meta name="twitter:title" content="User Profile - The MovieVerse">
+    <meta name="twitter:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
+    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
+    <meta name="referrer" content="no-referrer-when-downgrade">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="manifest" href="../../manifest.json">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-CQKJ67FXZ4');
+    </script>
+    <style>
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
+            font-weight: 200;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: 'Poppins';
+            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+            font-display: swap;
+        }
+        h1 {
+            color: #ff8623;
+        }
+        h1:hover {
+            color: #f509d9;
+            transition: 0.1s ease;
+        }
+        .profile-container {
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 20px;
+            background-color: rgba(211, 211, 211, 0.5);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
+            backdrop-filter: blur(5px);
+        }
+        .profile-container input[type="text"],
+        .profile-container input[type="date"],
+        .profile-container input[type="file"],
+        .profile-container button {
+            width: 90%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font: inherit;
+        }
+        .profile-container button {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .profile-container button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .profile-container h2, .profile-container p {
+            color: black;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+            padding-top: 60px;
+        }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 5% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 400px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(5px);
+        }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
+        .close:hover,
+        .close:focus {
+            color: #ff8623;
+            text-decoration: none;
+            cursor: pointer;
+        }
+        #editProfileModal {
+            z-index: 1000;
+            width: 100vw !important;
+        }
+        #editProfileModal .modal-content {
+            background-color: #373b69;
+            width: 400px !important;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
+        }
+        #editProfileForm input {
+            font: inherit;
+            border-radius: 8px;
+        }
+        #editProfileForm button {
+            background-color: #7378c5;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        #editProfileForm button:hover {
+            background-color: #ff8623;
+            color: white;
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .modal-header h2 {
+            margin: 0;
+            flex-grow: 1;
+        }
+        .modal-content {
+            padding-bottom: 20px;
+        }
+        .dob-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .dob-container label {
+            margin-right: 10px;
+            margin-top: 10px;
+            color: black;
+        }
+        .dob-container input[type="date"] {
+            flex-grow: 1;
+        }
+        .profile-image-container {
+            position: relative;
+            display: inline-block;
+        }
+        #removeProfileImage {
+            position: absolute;
+            top: 0;
+            background: none;
+            border: none;
+            color: red;
+            font-size: 30px;
+            font-weight: bold;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            margin: 0;
+        }
+        #removeProfileImage:hover {
+            color: #ff8623;
+        }
+        #editProfileForm .modal-content h2 {
+            color: #ff8623;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        #editProfileForm .modal-content label {
+            color: #fff;
+            margin-bottom: 10px;
+            display: block;
+        }
+        #editProfileForm .modal-content input[type="text"],
+        #editProfileForm .modal-content textarea {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            border: 1px solid #7378c5;
+            background-color: #22254b;
+            color: #fff;
+        }
+        #editProfileForm .modal-content button {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            margin: 10px auto;
+            transition: background-color 0.3s ease;
+        }
+        #editProfileForm .modal-content select {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            border: 1px solid #7378c5;
+            background-color: #22254b;
+            color: #fff;
+        }
+        @media (min-width: 900px) {
+            #search {
+                margin-top: 0 !important;
+            }
+        }
+        body {
+            background-image: url("../../images/universe-1.webp");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+    </style>
+    <script src="../js/user-profile.js" type="module"></script>
+    <style>
+        #translate_control {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            z-index: 1000000;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+        }
+        @media (max-width: 767px) {
+            #translate_control {
+                display: block;
+                bottom: 70px;
+                position: fixed;
+                left: 10px;
+                z-index: 1000000;
+            }
+        }
+        .translate-trigger {
+            background-color: #7378c5;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .translate-trigger:hover {
+            background-color: #ff8623;
+            transition: 0.1s ease-in;
+        }
+        #google_translate_element {
+            display: none;
+            position: fixed;
+            left: 10px;
+            bottom: 60px;
+            background-color: #7378c5;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 8px;
+            z-index: 100000000;
+            font: inherit;
+            color: white;
+        }
+        .goog-te-combo {
+            background-color: #7378c5 !important;
+            color: white !important;
+            border: 0.5px solid white !important;
+            border-radius: 8px !important;
+            font-size: 15px !important;
+            padding-left: 5px !important;
+        }
+        .skiptranslate {
+            color: white !important;
+        }
+        .goog-te-banner-frame {
+            opacity: 0.8 !important;
+            background-color: #f4f4f4 !important;
+        }
+        @media (max-width: 767px) {
+            #google_translate_element {
+                bottom: 120px;
+            }
+            #translate_control {
+                bottom: 70px;
+            }
+        }
+        #my-heading {
+            margin-top: 24px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="google_translate_element"></div>
+    <div id="translate_control">
+        <div class="translate-trigger">Translate</div>
+    </div>
+
+    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+
+        document.querySelector('.translate-trigger').addEventListener('click', function() {
+            const translateEl = document.getElementById('google_translate_element');
+            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            let lastScrollTop = window.scrollY;
+            const translateControl = document.getElementById('translate_control');
+            const translateEl = document.getElementById('google_translate_element');
+
+            window.addEventListener('scroll', function() {
+                let scrollTop = window.scrollY;
+
+                if (window.innerWidth <= 767) {
+                    if (scrollTop > lastScrollTop && scrollTop > 0) {
+                        translateControl.style.display = 'none';
+                        translateEl.style.display = 'none';
+                    }
+                    else {
+                        translateControl.style.display = 'block';
+                    }
+                    lastScrollTop = scrollTop;
+                }
+            }, { passive: true });
+        })
+    </script>
+    <header id="homepage-header" style="margin-top: -5px">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
+            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
+        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <form id="form1" style="margin-top: 20px">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
+        </form>
+        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
+        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
+    </header>
+    <div id="welcomeMessage" style="color: #ff8623; font-weight: bold; font-size: 30px; text-align: center; margin-top: 30px;"></div>
+    <div class="search-users-container" id="search-users-container">
+        <input type="text" id="searchUserInput" placeholder="Search For Any MovieVerse User..." title="Remember that this search is case-sensitive!" />
+        <button id="searchUserBtn">Search</button>
+    </div>
+    <div id="searchUserResults" class="search-results-container"></div>
+    <button id="viewMyProfileBtn" style="margin-top: 20px;">View My Profile</button>
+    <div id="profileContainer" class="profile-container">
+        <div class="profile-image-container">
+            <img id="profileImage" style="cursor: pointer" title="Click to upload a new profile image" onclick="document.getElementById('imageUpload').click()" src="../../images/user-default.png" alt="Profile Image" />
+            <button id="removeProfileImage" title="Click to remove the current profile image" style="display: none;">&times;</button>
+        </div>
+        <input type="file" id="imageUpload" accept="image/*" hidden />
+        <button id="changeProfileImageBtn" onclick="document.getElementById('imageUpload').click()">Change Profile Image</button>
+        <div class="profile-info">
+            <div id="averageDisplays" style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
+                <div class="progress-container" id="container1" style="cursor: pointer">
+                    <svg class="progress-ring" width="100" height="100">
+                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
+                        <circle class="progress-ring__progress" id="avgMovieRatingCircle" cx="50" cy="50" r="40" />
+                        <text class="progress-ring__text" id="avgMovieRatingText" x="50" y="50"></text>
+                    </svg>
+                    <p><strong>Average Movie Rating</strong></p>
+                </div>
+                <div class="progress-container" id="container2" style="cursor: pointer">
+                    <svg class="progress-ring" width="100" height="100">
+                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
+                        <circle class="progress-ring__progress" id="avgTriviaScoreCircle" cx="50" cy="50" r="40" />
+                        <text class="progress-ring__text" id="avgTriviaScoreText" x="50" y="50"></text>
+                    </svg>
+                    <p><strong>Average Movie Trivia Score</strong></p>
+                </div>
+            </div>
+            <p id="usernameDisplay">Username: <span></span></p>
+            <p id="dobDisplay">Date of Birth: <span></span></p>
+            <p id="bioDisplay">Bio: <span></span></p>
+            <p id="favoriteGenresDisplay">Favorite Genres: <span></span></p>
+            <p id="locationDisplay">Location: <span></span></p>
+            <p id="favoriteMovieDisplay">Favorite Movie: <span></span></p>
+            <p id="hobbiesDisplay">Hobbies: <span></span></p>
+            <p id="favoriteActorDisplay"><strong>Favorite Actor:</strong> <span></span></p>
+            <p id="favoriteDirectorDisplay"><strong>Favorite Director:</strong> <span></span></p>
+            <p id="personalQuoteDisplay"><strong>Personal Quote:</strong> <span></span></p>
+            <p id="followingDisplay"><strong>Following:</strong> <span id="followingList"></span></p>
+            <p id="followersDisplay"><strong>Followers:</strong> <span id="followersList"></span></p>
+        </div>
+        <button id="editProfileBtn">Edit Profile Details</button>
+    </div>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <p id="signInPrompt" style="text-align: center; font-size: 24px; margin-top: 100px;"></p>
+    <div id="editProfileModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header" style="margin-bottom: 20px">
+                <h2>Edit Profile Details</h2>
+                <span class="close" onclick="closeModal()">&times;</span>
+            </div>
+            <form id="editProfileForm">
+                <div style="text-align: center">
+                    <label for="editUsername" style="color: white">Username:</label>
+                    <input type="text" id="editUsername" placeholder="Username">
+                </div>
+                <div style="text-align: center">
+                    <label for="editDob" style="color: white">Date of Birth:</label>
+                    <input type="date" id="editDob" style="padding-left: 5px; width: 100%" placeholder="Date of Birth" title="Click to select your date of birth"/>
+                </div>
+                <div style="text-align: center; margin-top: 20px">
+                    <label for="editBio" style="color: white">Bio:</label>
+                    <input type="text" id="editBio" placeholder="Bio">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteGenres" style="color: white">Favorite Genres:</label>
+                    <input type="text" id="editFavoriteGenres" placeholder="Favorite Genres">
+                </div>
+                <div style="text-align: center">
+                    <label for="editLocation" style="color: white">Location:</label>
+                    <input type="text" id="editLocation" placeholder="Location">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteMovie" style="color: white">Favorite Movie:</label>
+                    <input type="text" id="editFavoriteMovie" placeholder="Favorite Movie">
+                </div>
+                <div style="text-align: center">
+                    <label for="editHobbies" style="color: white">Hobbies:</label>
+                    <input type="text" id="editHobbies" placeholder="Hobbies">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteActor" style="color: white">Favorite Actor:</label>
+                    <input type="text" id="editFavoriteActor" placeholder="Favorite Actor">
+                </div>
+                <div style="text-align: center">
+                    <label for="editFavoriteDirector" style="color: white">Favorite Director:</label>
+                    <input type="text" id="editFavoriteDirector" placeholder="Favorite Director">
+                </div>
+                <div style="text-align: center">
+                    <label for="editPersonalQuote" style="color: white">Personal Quote:</label>
+                    <input type="text" id="editPersonalQuote" placeholder="Personal Quote">
+                </div>
+                <button type="button" id="saveChanges">Save Changes</button>
+                <button type="button" id="cancelEdit" onclick="closeModal()">Cancel</button>
+            </form>
+        </div>
+    </div>
+    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+        <p style="margin: 0;">Advertisement</p>
+        <ins class="adsbygoogle"
+             style="display: block; width: 100%;"
+             data-ad-client="ca-pub-6608388491200814"
+             data-ad-slot="4832732030"
+             data-ad-format="auto"></ins>
+        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <div id="myModal" class="modal-overlay">
+        <div class="spinner"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
+                    }
+                }
+                else {
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
+                }
+            }
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+                const searchResultsContainer = document.getElementById('search-results');
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.log("Fetching error:", err));
+                }
+                else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    }
+                    else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    }
+                    else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    }
+                    else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                console.log('Clicked item:', item.media_type, item.id);
+
+                if (!item.media_type) {
+                    console.log('Media type is undefined');
+                    return;
+                }
+
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                }
+                else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.log('Error fetching person details:', error);
+                    }
+                }
+                else {
+                    console.log('Unknown media type:', item.media_type);
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                    else {
+                        const query = searchInput.value.trim();
+                        localStorage.setItem('searchQuery', query);
+                        window.location.href = 'search.html';
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+    <script>
+        const movieCodes = {
+            part1: 'YzVhMjBjODY=',
+            part2: 'MWFjZjdiYjg=',
+            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
+        };
+
+        function getMovieCode() {
+            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
+        }
+
+        function generateMovieNames(input) {
+            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
+        }
+
+        function getMovieVerseData(input) {
+            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
+        }
+
+        async function showMovieOfTheDay() {
+            const year = new Date().getFullYear();
+            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const movies = data.results;
+
+                if (movies.length > 0) {
+                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                    localStorage.setItem('selectedMovieId', randomMovie.id);
+                    window.location.href = 'movie-details.html';
+                }
+                else {
+                    fallbackMovieSelection();
+                }
+            }
+            catch (error) {
+                console.log('Error fetching movie:', error);
+                fallbackMovieSelection();
+            }
+        }
+
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'settings.html';
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            applySettings();
+
+            function applySettings() {
+                const defaultBg = '../../images/universe-1.webp';
+                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+                const savedTextColor = localStorage.getItem('textColor');
+                const savedFontSize = localStorage.getItem('fontSize');
+                document.body.style.backgroundImage = `url('${savedBg}')`;
+
+                if (savedTextColor) {
+                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                        element.style.color = savedTextColor;
+                    });
+                }
+
+                if (savedFontSize) {
+                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                    document.body.style.fontSize = size;
+                }
+            }
+        });
+
+        let today = new Date();
+        today.setFullYear(today.getFullYear() - 18);
+        let year = today.getFullYear();
+        let month = (today.getMonth() + 1).toString().padStart(2, '0');
+        let day = today.getDate().toString().padStart(2, '0');
+        let dateMinus18Years = `${year}-${month}-${day}`;
+        document.getElementById('editDob').value = dateMinus18Years;
+
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        const form = document.getElementById('form1');
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        });
+
+        function handleSearch() {
+            const searchQuery = document.getElementById('search').value;
+            localStorage.setItem('searchQuery', searchQuery);
+            window.location.href = 'search.html';
+        }
+
+        function closeModal() {
+            document.getElementById('editProfileModal').style.display = 'none';
+        }
+    </script>
+    <footer style="margin-top: 800px">
+        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
+            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+        </a>
+    </footer>
+    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
+        <a href="chat.html" class="bottom-bar-item">
+            <i class="fas fa-comments"></i>
+            <span>Chat</span>
+        </a>
+        <a href="settings.html" class="bottom-bar-item">
+            <i class="fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
+            <i class="fas fa-surprise"></i>
+            <span>Surprise Me</span>
+        </a>
+        <a href="movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+    </div>
+    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
+        <i class="fas fa-ellipsis-h"></i><br>
+        <span>Menu</span>
+    </button>
+    <script>
+        window.addEventListener('load', function() {
+            adjustAnchorHeights();
+        });
+
+        window.addEventListener('resize', adjustAnchorHeights);
+
+        function adjustAnchorHeights() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+                const anchorHeight = anchor.getBoundingClientRect().height;
+                maxHeight = Math.max(maxHeight, anchorHeight);
+            });
+
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        }
+
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+
+            if (currentScrollY > lastScrollY && currentScrollY > 0) {
+                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
+            }
+            else {
+                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
+            }
+
+            lastScrollY = currentScrollY;
+        });
+
+        let isAnimating = false;
+
+        document.getElementById('menu-btn').addEventListener('click', () => {
+            if (isAnimating) return;
+
+            isAnimating = true;
+
+            const buttonIds = [
+                'chat-button',
+                'settings-btn',
+                'movie-of-the-day-btn',
+                'movie-match-btn3',
+                'movie-timeline-btn',
+                'discussions-btn',
+                'trivia-btn',
+            ];
+
+            buttonIds.forEach((id, index) => {
+                const button = document.getElementById(id);
+                if (button.style.display === 'none' || !button.style.display) {
+                    button.style.display = 'block';
+                    setTimeout(() => {
+                        button.style.opacity = '1';
+                        button.style.transform = 'translateY(0)';
+                    }, 50 * index);
+                }
+                else {
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                }
+
+                setTimeout(() => {
+                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
+                    if (index === buttonIds.length - 1) {
+                        isAnimating = false;
+                    }
+                }, 500 + 50 * index);
+            });
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth < 767) {
+                const buttonIds = [
+                    'chat-button',
+                    'settings-btn',
+                    'movie-of-the-day-btn',
+                    'movie-match-btn3',
+                    'movie-timeline-btn',
+                    'discussions-btn',
+                    'trivia-btn',
+                ];
+
+                buttonIds.forEach(id => {
+                    const button = document.getElementById(id);
+                    button.style.display = 'none';
+                    button.style.opacity = '0';
+                    button.style.transform = 'translateY(20px)';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/MovieVerse-Mobile/www/index.html b/MovieVerse-Mobile/www/index.html
index 89635dda..cbd545c2 100644
--- a/MovieVerse-Mobile/www/index.html
+++ b/MovieVerse-Mobile/www/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
@@ -535,7 +534,6 @@
         }
     </style>
 </head>
-
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -543,7 +541,6 @@
     gtag('js', new Date());
     gtag('config', 'G-CQKJ67FXZ4');
 </script>
-
 <body>
     <header id="homepage-header" style="margin-bottom: -10px">
         <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
diff --git a/MovieVerse-Mobile/www/js/chat.js b/MovieVerse-Mobile/www/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/www/js/chat.js
+++ b/MovieVerse-Mobile/www/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/www/js/chatbot.js b/MovieVerse-Mobile/www/js/chatbot.js
index 47871124..30ad3a1f 100644
--- a/MovieVerse-Mobile/www/js/chatbot.js
+++ b/MovieVerse-Mobile/www/js/chatbot.js
@@ -3,6 +3,7 @@ import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/ge
 const chatbotInput = document.getElementById("chatbotInput");
 const chatbotBody = document.getElementById("chatbotBody");
 const movieee = `https://${getMovieVerseData()}/3`;
+
 let initialMainContent;
 let conversationHistory = [];
 
@@ -177,6 +178,7 @@ function updateMovieVisitCount(movieId, movieTitle) {
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
+
     movieVisits[movieId].count += 1;
 
     if (!uniqueMoviesViewed.includes(movieId)) {
@@ -219,6 +221,7 @@ function getMostVisitedMovie() {
 
 function getMostVisitedActor() {
     const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+
     let mostVisitedActor = '';
     let maxVisits = 0;
 
@@ -234,6 +237,7 @@ function getMostVisitedActor() {
 
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
@@ -264,63 +268,6 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
-function updateUniqueDirectorsViewed(directorId) {
-    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-    if (!viewedDirectors.includes(directorId)) {
-        viewedDirectors.push(directorId);
-        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
-    }
-}
-
-function updateActorVisitCount(actorId, actorName) {
-    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-    if (!actorVisits[actorId]) {
-        actorVisits[actorId] = { count: 0, name: actorName };
-    }
-
-    actorVisits[actorId].count += 1;
-    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
-}
-
-function updateDirectorVisitCount(directorId, directorName) {
-    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    if (!directorVisits[directorId]) {
-        directorVisits[directorId] = { count: 0, name: directorName };
-    }
-
-    directorVisits[directorId].count += 1;
-    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
-}
-
-function calculateMoviesToDisplay() {
-    const screenWidth = window.innerWidth;
-    if (screenWidth <= 689.9) return 10; // 1 movie per row
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -348,66 +295,20 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
             <span style="color: #ff8623;">MovieVerse Assistant:</span>
             <span style="display: inline-block; text-align: left; color: #fff;">
-                Welcome to MovieVerse Assistant! Here's how to get started:
+                Welcome to MovieVerse Assistant 🍿! Here's how to get started:
             </span>
         </div>
         <ul style="text-align: left; margin-bottom: 10px; color: #fff;">
             <li>To find details about a movie, type "Show me details about [movie name]".</li>
-            <li>To watch a movie trailer, type "Show trailer for [movie name]".</li>
-            <li>Or, if you just want quick information about a movie, type "Tell me about [movie name]" or "Do you know about [movie name]".</li>
             <li>You can also ask about genres, top-rated movies, latest movies, get a recommended movie, and any general questions!</li>
-            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like the first three pre-defined functionalities above, as they might trigger those specific functions instead of a broader search.</li> 
+            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like "Show me details about ...", as they might trigger specific functions instead of a broader search.</li> 
         </ul>
-        <div style="text-align: left; color: #fff;">How may I assist you today?</div>
+        <div style="text-align: left; color: #fff;">How may I assist you today? 🎬🍿</div>
     `;
     chatbotBody.innerHTML += `<div>${initialMessage}</div>`;
     scrollToBottom();
@@ -417,40 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -465,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -549,79 +383,21 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    if (lowerMessage.startsWith("do you know about ") ||
-        lowerMessage.startsWith("tell me about ") ||
-        lowerMessage.startsWith("what is ")) {
-        const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-        return await fetchMovieDetailsFromTMDB(movieName);
-    }
-    if (lowerMessage.startsWith("show me details about ") ||
-        lowerMessage.startsWith("i want to know more about ") ||
-        lowerMessage.startsWith("details about ") ||
-        lowerMessage.startsWith("search for ")) {
-        const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-        fetchAndRedirectToMovieDetails(movieName);
-        return `Searching for details about "${movieName}". Please wait...`;
-    }
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
         return `Searching for the trailer of "${movieName}". Please wait...`;
     }
+
     if (lowerMessage.startsWith("hello") || lowerMessage.startsWith("hi") || lowerMessage.startsWith("hey")) {
         return "Hello! How can I assist you with MovieVerse today?";
     }
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -629,7 +405,10 @@ async function movieVerseResponse(message) {
         let fullResponse = '';
         try {
             const genAI = new GoogleGenerativeAI(getAIResponse());
-            const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+            const model = genAI.getGenerativeModel({
+                model: "gemini-1.5-flash",
+                systemInstruction: "You are MovieVerse Assistant - an AI Chatbot of the MovieVerse App. You are here to help users with movie-related or any other general queries. You are trained and powered by MovieVerse AI and Google to provide the best assistance. You can also provide information about movies, actors, directors, genres, and companies, or recommend movies to users.",
+            });
 
             conversationHistory.push({ role: "user", parts: [{ text: message }] });
 
@@ -678,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
@@ -764,6 +544,7 @@ async function showMovieOfTheDay() {
 function fallbackMovieSelection() {
     const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
     const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+
     localStorage.setItem('selectedMovieId', randomFallbackMovie);
     window.location.href = 'movie-details.html';
 }
diff --git a/MovieVerse-Mobile/www/js/movie-details.js b/MovieVerse-Mobile/www/js/movie-details.js
index 957fda89..5d9e8acf 100644
--- a/MovieVerse-Mobile/www/js/movie-details.js
+++ b/MovieVerse-Mobile/www/js/movie-details.js
@@ -1639,8 +1639,15 @@ function createImdbRatingCircle(imdbRating, imdbId) {
     if (imdbRating === 'N/A' || imdbRating === null || imdbRating === undefined) {
         imdbRating = 'N/A';
     }
-
-    imdbRating = imdbRating.toFixed(1);
+    else {
+        imdbRating = parseFloat(imdbRating);
+        if (!isNaN(imdbRating)) {
+            imdbRating = imdbRating.toFixed(1);
+        }
+        else {
+            imdbRating = 'N/A';
+        }
+    }
 
     let circleContainer = document.getElementById('imdbRatingCircleContainer');
     if (!circleContainer) {
diff --git a/MovieVerse-Mobile/www/js/sign-in.js b/MovieVerse-Mobile/www/js/sign-in.js
index ca744c7d..dbb35fc4 100644
--- a/MovieVerse-Mobile/www/js/sign-in.js
+++ b/MovieVerse-Mobile/www/js/sign-in.js
@@ -58,7 +58,7 @@ document.getElementById('signInForm').addEventListener('submit', async function(
             alert('Successfully signed in!');
             localStorage.setItem('isSignedIn', JSON.stringify(true));
             localStorage.setItem('currentlySignedInMovieVerseUser', email);
-            window.location.href = '../../../../Downloads/The-MovieVerse-Database-ee3ec4ea5610d37178bc008fd505fd99c5f83070/index.html';
+            window.location.href = '../../index.html';
         } else {
             alert('Invalid email or password. Ensure that you have entered a correct combination of email and password - one that we have on file.');
         }
diff --git a/index.html b/index.html
index 60dbe98a..62e0d19e 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-    
+
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

From 09259671a24a197a8caff40e33497ae3e5e100f3 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Wed, 17 Jul 2024 12:55:07 +0700
Subject: [PATCH 08/18] Final: Enhance app functionalities (#196)

---
 MovieVerse-Frontend/html/about.html           |   29 -
 MovieVerse-Frontend/html/actor-details.html   |    1 -
 .../app/src/main/assets/www/css/index.css     |  110 -
 .../app/src/main/assets/www/css/index.scss    |   87 -
 .../app/src/main/assets/www/css/navbar.scss   |   97 -
 .../app/src/main/assets/www/css/profile.scss  |   83 -
 .../app/src/main/assets/www/css/reset.css     |   43 -
 .../app/src/main/assets/www/css/style.css     | 4087 -----------------
 .../app/src/main/assets/www/css/trivia.css    | 1157 -----
 .../app/src/main/assets/www/html/about.html   | 1286 ------
 .../main/assets/www/html/actor-details.html   |  808 ----
 .../src/main/assets/www/html/analytics.html   |  910 ----
 .../src/main/assets/www/html/api_fails.html   | 1026 -----
 .../app/src/main/assets/www/html/article.hbs  |   17 -
 .../app/src/main/assets/www/html/chat.html    | 1023 -----
 .../app/src/main/assets/www/html/chatbot.html |  846 ----
 .../assets/www/html/christopher-nolan.html    |  497 --
 .../main/assets/www/html/company-details.html |  795 ----
 .../main/assets/www/html/create-account.html  | 1052 -----
 .../assets/www/html/director-details.html     |  835 ----
 .../src/main/assets/www/html/favorites.html   | 1102 -----
 .../src/main/assets/www/html/feedback.html    | 1107 -----
 .../src/main/assets/www/html/inception.html   |  521 ---
 .../assets/www/html/leonardo-dicaprio.html    |  470 --
 .../main/assets/www/html/movie-details.html   |  907 ----
 .../src/main/assets/www/html/movie-match.html |  854 ----
 .../main/assets/www/html/movie-timeline.html  |  806 ----
 .../src/main/assets/www/html/movies-list.hbs  |   35 -
 .../main/assets/www/html/notifications.html   | 1329 ------
 .../app/src/main/assets/www/html/offline.html |  798 ----
 .../main/assets/www/html/privacy-policy.html  |  395 --
 .../app/src/main/assets/www/html/profile.ejs  |   59 -
 .../main/assets/www/html/reset-password.html  | 1097 -----
 .../app/src/main/assets/www/html/search.html  |  921 ----
 .../src/main/assets/www/html/settings.html    | 1231 -----
 .../app/src/main/assets/www/html/sign-in.html | 1077 -----
 .../app/src/main/assets/www/html/support.html | 1101 -----
 .../assets/www/html/terms-of-service.html     |  399 --
 .../app/src/main/assets/www/html/trivia.html  | 1173 -----
 .../src/main/assets/www/html/tv-details.html  |  938 ----
 .../main/assets/www/html/user-profile.html    | 1337 ------
 .../app/src/main/assets/www/index.html        |   47 -
 .../platforms/ios/www/css/index.css           |  110 -
 .../platforms/ios/www/css/index.scss          |   87 -
 .../platforms/ios/www/css/navbar.scss         |   97 -
 .../platforms/ios/www/css/profile.scss        |   83 -
 .../platforms/ios/www/css/reset.css           |   43 -
 .../platforms/ios/www/css/style.css           | 4087 -----------------
 .../platforms/ios/www/css/trivia.css          | 1157 -----
 .../platforms/ios/www/html/about.html         | 1286 ------
 .../platforms/ios/www/html/actor-details.html |  808 ----
 .../platforms/ios/www/html/analytics.html     |  910 ----
 .../platforms/ios/www/html/api_fails.html     | 1026 -----
 .../platforms/ios/www/html/article.hbs        |   17 -
 .../platforms/ios/www/html/chat.html          | 1023 -----
 .../platforms/ios/www/html/chatbot.html       |  846 ----
 .../ios/www/html/christopher-nolan.html       |  497 --
 .../ios/www/html/company-details.html         |  795 ----
 .../ios/www/html/create-account.html          | 1052 -----
 .../ios/www/html/director-details.html        |  835 ----
 .../platforms/ios/www/html/favorites.html     | 1102 -----
 .../platforms/ios/www/html/feedback.html      | 1107 -----
 .../platforms/ios/www/html/inception.html     |  521 ---
 .../ios/www/html/leonardo-dicaprio.html       |  470 --
 .../platforms/ios/www/html/movie-details.html |  907 ----
 .../platforms/ios/www/html/movie-match.html   |  854 ----
 .../ios/www/html/movie-timeline.html          |  806 ----
 .../platforms/ios/www/html/movies-list.hbs    |   35 -
 .../platforms/ios/www/html/notifications.html | 1329 ------
 .../platforms/ios/www/html/offline.html       |  798 ----
 .../ios/www/html/privacy-policy.html          |  395 --
 .../platforms/ios/www/html/profile.ejs        |   59 -
 .../ios/www/html/reset-password.html          | 1097 -----
 .../platforms/ios/www/html/search.html        |  921 ----
 .../platforms/ios/www/html/settings.html      | 1231 -----
 .../platforms/ios/www/html/sign-in.html       | 1077 -----
 .../platforms/ios/www/html/support.html       | 1101 -----
 .../ios/www/html/terms-of-service.html        |  399 --
 .../platforms/ios/www/html/trivia.html        | 1173 -----
 .../platforms/ios/www/html/tv-details.html    |  938 ----
 .../platforms/ios/www/html/user-profile.html  | 1337 ------
 .../platforms/ios/www/index.html              |   47 -
 MovieVerse-Mobile/www/css/index.css           |  110 -
 MovieVerse-Mobile/www/css/index.scss          |   87 -
 MovieVerse-Mobile/www/css/navbar.scss         |   97 -
 MovieVerse-Mobile/www/css/profile.scss        |   83 -
 MovieVerse-Mobile/www/css/reset.css           |   43 -
 MovieVerse-Mobile/www/css/style.css           | 4087 -----------------
 MovieVerse-Mobile/www/css/trivia.css          | 1157 -----
 MovieVerse-Mobile/www/html/about.html         | 1286 ------
 MovieVerse-Mobile/www/html/actor-details.html |  808 ----
 MovieVerse-Mobile/www/html/analytics.html     |  910 ----
 MovieVerse-Mobile/www/html/api_fails.html     | 1026 -----
 MovieVerse-Mobile/www/html/article.hbs        |   17 -
 MovieVerse-Mobile/www/html/chat.html          | 1023 -----
 MovieVerse-Mobile/www/html/chatbot.html       |  846 ----
 .../www/html/christopher-nolan.html           |  497 --
 .../www/html/company-details.html             |  795 ----
 .../www/html/create-account.html              | 1052 -----
 .../www/html/director-details.html            |  835 ----
 MovieVerse-Mobile/www/html/favorites.html     | 1102 -----
 MovieVerse-Mobile/www/html/feedback.html      | 1107 -----
 MovieVerse-Mobile/www/html/inception.html     |  521 ---
 .../www/html/leonardo-dicaprio.html           |  470 --
 MovieVerse-Mobile/www/html/movie-details.html |  907 ----
 MovieVerse-Mobile/www/html/movie-match.html   |  854 ----
 .../www/html/movie-timeline.html              |  806 ----
 MovieVerse-Mobile/www/html/movies-list.hbs    |   35 -
 MovieVerse-Mobile/www/html/notifications.html | 1329 ------
 MovieVerse-Mobile/www/html/offline.html       |  798 ----
 .../www/html/privacy-policy.html              |  395 --
 MovieVerse-Mobile/www/html/profile.ejs        |   59 -
 .../www/html/reset-password.html              | 1097 -----
 MovieVerse-Mobile/www/html/search.html        |  921 ----
 MovieVerse-Mobile/www/html/settings.html      | 1231 -----
 MovieVerse-Mobile/www/html/sign-in.html       | 1077 -----
 MovieVerse-Mobile/www/html/support.html       | 1101 -----
 .../www/html/terms-of-service.html            |  399 --
 MovieVerse-Mobile/www/html/trivia.html        | 1173 -----
 MovieVerse-Mobile/www/html/tv-details.html    |  938 ----
 MovieVerse-Mobile/www/html/user-profile.html  | 1337 ------
 MovieVerse-Mobile/www/index.html              |   47 -
 index.html                                    |   47 -
 123 files changed, 97466 deletions(-)
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.css
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.scss
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/navbar.scss
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/profile.scss
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/reset.css
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/style.css
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/trivia.css
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/about.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/actor-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/analytics.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/api_fails.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/article.hbs
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chat.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chatbot.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/christopher-nolan.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/company-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/create-account.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/director-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/favorites.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/feedback.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/inception.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/leonardo-dicaprio.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-match.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-timeline.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movies-list.hbs
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/notifications.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/offline.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/privacy-policy.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/profile.ejs
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/reset-password.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/search.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/settings.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/sign-in.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/support.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/terms-of-service.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/trivia.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/tv-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/user-profile.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/css/index.css
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/css/index.scss
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/css/navbar.scss
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/css/profile.scss
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/css/reset.css
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/css/style.css
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/css/trivia.css
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/about.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/actor-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/analytics.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/api_fails.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/article.hbs
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/chat.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/chatbot.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/christopher-nolan.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/company-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/create-account.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/director-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/favorites.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/feedback.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/inception.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/leonardo-dicaprio.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/movie-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/movie-match.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/movie-timeline.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/movies-list.hbs
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/notifications.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/offline.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/privacy-policy.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/profile.ejs
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/reset-password.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/search.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/settings.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/sign-in.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/support.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/terms-of-service.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/trivia.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/tv-details.html
 delete mode 100644 MovieVerse-Mobile/platforms/ios/www/html/user-profile.html
 delete mode 100644 MovieVerse-Mobile/www/css/index.css
 delete mode 100644 MovieVerse-Mobile/www/css/index.scss
 delete mode 100644 MovieVerse-Mobile/www/css/navbar.scss
 delete mode 100644 MovieVerse-Mobile/www/css/profile.scss
 delete mode 100644 MovieVerse-Mobile/www/css/reset.css
 delete mode 100644 MovieVerse-Mobile/www/css/style.css
 delete mode 100644 MovieVerse-Mobile/www/css/trivia.css
 delete mode 100644 MovieVerse-Mobile/www/html/about.html
 delete mode 100644 MovieVerse-Mobile/www/html/actor-details.html
 delete mode 100644 MovieVerse-Mobile/www/html/analytics.html
 delete mode 100644 MovieVerse-Mobile/www/html/api_fails.html
 delete mode 100644 MovieVerse-Mobile/www/html/article.hbs
 delete mode 100644 MovieVerse-Mobile/www/html/chat.html
 delete mode 100644 MovieVerse-Mobile/www/html/chatbot.html
 delete mode 100644 MovieVerse-Mobile/www/html/christopher-nolan.html
 delete mode 100644 MovieVerse-Mobile/www/html/company-details.html
 delete mode 100644 MovieVerse-Mobile/www/html/create-account.html
 delete mode 100644 MovieVerse-Mobile/www/html/director-details.html
 delete mode 100644 MovieVerse-Mobile/www/html/favorites.html
 delete mode 100644 MovieVerse-Mobile/www/html/feedback.html
 delete mode 100644 MovieVerse-Mobile/www/html/inception.html
 delete mode 100644 MovieVerse-Mobile/www/html/leonardo-dicaprio.html
 delete mode 100644 MovieVerse-Mobile/www/html/movie-details.html
 delete mode 100644 MovieVerse-Mobile/www/html/movie-match.html
 delete mode 100644 MovieVerse-Mobile/www/html/movie-timeline.html
 delete mode 100644 MovieVerse-Mobile/www/html/movies-list.hbs
 delete mode 100644 MovieVerse-Mobile/www/html/notifications.html
 delete mode 100644 MovieVerse-Mobile/www/html/offline.html
 delete mode 100644 MovieVerse-Mobile/www/html/privacy-policy.html
 delete mode 100644 MovieVerse-Mobile/www/html/profile.ejs
 delete mode 100644 MovieVerse-Mobile/www/html/reset-password.html
 delete mode 100644 MovieVerse-Mobile/www/html/search.html
 delete mode 100644 MovieVerse-Mobile/www/html/settings.html
 delete mode 100644 MovieVerse-Mobile/www/html/sign-in.html
 delete mode 100644 MovieVerse-Mobile/www/html/support.html
 delete mode 100644 MovieVerse-Mobile/www/html/terms-of-service.html
 delete mode 100644 MovieVerse-Mobile/www/html/trivia.html
 delete mode 100644 MovieVerse-Mobile/www/html/tv-details.html
 delete mode 100644 MovieVerse-Mobile/www/html/user-profile.html

diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
index 87048c73..5a808f24 100644
--- a/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Frontend/html/about.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-
         <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
-
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
-
         <div id="button-container">
             <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
         </div>
-
         <ul style="overflow-y: auto">
             <li><a href="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">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">
             <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 specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');
diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
index e96b40fe..ef6b3eff 100644
--- a/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Frontend/html/actor-details.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.css
deleted file mode 100644
index ecea7e8e..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-* {
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-}
-
-body {
-    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-    background-color:#E4E4E4;
-    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
-    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
-    font-size:12px;
-    height:100vh;
-    margin:0px;
-    padding:0px;
-    /* Padding to avoid the "unsafe" areas behind notches in the screen */
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
-    text-transform:uppercase;
-    width:100%;
-}
-
-/* Portrait layout (default) */
-.app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
-    text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
-}
-
-/* Landscape layout (with min-width) */
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
-    .app {
-        background-position:left center;
-        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
-        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
-                                      /* offset horizontal: half of image width and text area width */
-    }
-}
-
-h1 {
-    font-size:24px;
-    font-weight:normal;
-    margin:0px;
-    overflow:visible;
-    padding:0px;
-    text-align:center;
-}
-
-.event {
-    border-radius:4px;
-    color:#FFFFFF;
-    font-size:12px;
-    margin:0px 30px;
-    padding:2px 0px;
-}
-
-.event.listening {
-    background-color:#333333;
-    display:block;
-}
-
-.event.received {
-    background-color:#4B946A;
-    display:none;
-}
-
-#deviceready.ready .event.listening { display: none; }
-#deviceready.ready .event.received { display: block; }
-
-@keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
-
-.blink {
-    animation:fade 3000ms infinite;
-    -webkit-animation:fade 3000ms infinite;
-}
-
-
-@media screen and (prefers-color-scheme: dark) {
-    body {
-        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
-    }
-}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.scss b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.scss
deleted file mode 100644
index 786e8d13..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-$font-family-poppins: "Poppins", sans-serif;
-$background-color-primary: #7378c5;
-$hover-color: #ff8623;
-$link-color: white;
-$link-hover-color: #f509d9;
-
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background: url("../../images/universe-1.png") no-repeat center center fixed;
-  background-size: cover;
-  font-family: $font-family-poppins;
-  margin: 0;
-  align-content: center;
-  overflow-x: hidden;
-  min-height: 100vh;
-  overflow-y: auto;
-}
-
-%button-style {
-  background-color: $background-color-primary;
-  color: black;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  &:hover {
-    background-color: $hover-color;
-    transition: 0.3s ease-in;
-  }
-}
-
-#movie-match-btn {
-  @extend %button-style;
-  position: fixed;
-  bottom: 220px;
-  right: 20px;
-}
-
-#submit-comment {
-  @extend %button-style;
-  padding: 10px 15px;
-}
-
-%link-style {
-  color: $link-color;
-  text-decoration: underline;
-  &:hover {
-    color: $link-hover-color;
-  }
-}
-
-#cast-info, #similar-tv, #director-link {
-  @extend %link-style;
-}
-
-@mixin modal-style {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  margin-top: 5px;
-}
-
-.modal-header {
-  @include modal-style;
-}
-
-.comments-controls {
-  display: flex;
-  align-items: center;
-  button:disabled {
-    cursor: not-allowed;
-  }
-  &.justify-start {
-    justify-content: start;
-  }
-  &.justify-center {
-    justify-content: center;
-    gap: 10px;
-    width: 100%;
-  }
-}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/navbar.scss b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/navbar.scss
deleted file mode 100644
index 6ff9d8ec..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/navbar.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-$breakpoint-mobile: 480px;
-$breakpoint-tablet: 768px;
-$breakpoint-desktop: 1024px;
-
-$navbar-background-color: #333;
-$navbar-text-color: #fff;
-$navbar-hover-color: #555;
-$mobile-menu-background-color: #222;
-
-@mixin responsive-visibility {
-  @media (max-width: $breakpoint-mobile) {
-    display: none;
-  }
-}
-
-.navbar {
-  background-color: $navbar-background-color;
-  color: $navbar-text-color;
-  padding: 1em;
-
-  .logo {
-    float: left;
-    font-size: 1.5em;
-    margin-right: 15px;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    float: right;
-
-    li {
-      display: inline;
-      margin-left: 15px;
-
-      a {
-        text-decoration: none;
-        color: $navbar-text-color;
-
-        &:hover {
-          color: $navbar-hover-color;
-        }
-      }
-    }
-  }
-
-  @media (max-width: $breakpoint-tablet) {
-    ul {
-      float: none;
-      text-align: center;
-
-      li {
-        display: block;
-        margin-top: 0.5em;
-      }
-    }
-  }
-}
-
-.mobile-menu-btn {
-  @include responsive-visibility;
-
-  display: inline-block;
-  background-color: $mobile-menu-background-color;
-  color: $navbar-text-color;
-  padding: 10px;
-  border: none;
-  cursor: pointer;
-}
-
-.mobile-menu {
-  display: none;
-
-  &.active {
-    display: block;
-    padding: 10px;
-    background-color: $mobile-menu-background-color;
-
-    ul {
-      text-align: center;
-
-      li {
-        margin-top: 10px;
-
-        a {
-          display: block;
-          color: $navbar-text-color;
-
-          &:hover {
-            background-color: $navbar-hover-color;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/profile.scss b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/profile.scss
deleted file mode 100644
index 78f9b2e3..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/profile.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-$primary-color: #4A90E2;
-$secondary-color: #50E3C2;
-$text-color: #4A4A4A;
-$background-color: #F5F7FA;
-$padding-standard: 15px;
-$border-radius-standard: 5px;
-
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin card-style {
-  background-color: white;
-  border-radius: $border-radius-standard;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  padding: $padding-standard;
-}
-
-body {
-  font-family: 'Poppins', sans-serif;
-  color: $text-color;
-  background-color: $background-color;
-}
-
-a {
-  color: $primary-color;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.profile-container {
-  @include flex-center;
-  flex-direction: column;
-}
-
-.profile-header {
-  @include flex-center;
-  flex-direction: column;
-  margin-bottom: 20px;
-
-  .profile-image {
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    margin-bottom: $padding-standard;
-  }
-
-  .profile-name {
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  .profile-bio {
-    text-align: center;
-    margin-top: $padding-standard;
-  }
-}
-
-.profile-content {
-  @include card-style;
-  margin: 20px auto;
-  width: 90%;
-  max-width: 600px;
-
-  .section {
-    &:not(:last-child) {
-      margin-bottom: 20px;
-    }
-
-    h2 {
-      border-bottom: 2px solid $primary-color;
-      padding-bottom: $padding-standard / 2;
-    }
-
-    p, ul {
-      margin-top: $padding-standard / 2;
-    }
-  }
-}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/reset.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/reset.css
deleted file mode 100644
index 7a836fce..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/reset.css
+++ /dev/null
@@ -1,43 +0,0 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/style.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/style.css
deleted file mode 100644
index f24d2b24..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/style.css
+++ /dev/null
@@ -1,4087 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-Light.ttf') format('truetype');
-    font-weight: 200;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-body {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    font-family: "Poppins", sans-serif;
-    margin: 0;
-    align-content: center;
-    overflow-x: hidden;
-    min-height: 100vh;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-}
-
-#heading-href {
-    text-decoration: none;
-}
-
-.cast-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.cast-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    width: 115px;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-.cast-image {
-    width: 100%;
-    height: 155px;
-    object-fit: cover;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.cast-item:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.cast-details {
-    width: 100%;
-}
-
-.actor-name, .actor-role {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-    white-space: normal;
-    text-align: center;
-}
-
-.actor-role {
-    font-style: italic;
-}
-
-.last-episode {
-    flex-direction: column;
-    align-items: center;
-    display: inline-block;
-}
-
-.last-episode strong {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.last-episode-image-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.last-episode-image {
-    max-width: 220px;
-    height: auto;
-    border-radius: 5px;
-}
-
-.last-episode-image:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.director-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.director-list {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.director-link {
-    display: flex;
-    align-items: center;
-    text-align: center;
-}
-
-.director-link .cast-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.director-link .cast-image {
-    width: 100%;
-    height: 155px;
-    margin-bottom: 5px;
-}
-
-.director-link .actor-name {
-    font-size: 12px;
-}
-
-.creators-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.creator-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    width: 115px;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-.creator-image {
-    width: 100%;
-    height: 155px;
-    object-fit: cover !important;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.creator-item:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.creator-details {
-    width: 100%;
-}
-
-.creator-name {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-}
-
-#movie-match-btn {
-    position: fixed;
-    bottom: 220px;
-    right: 20px;
-    background-color: #7378c5;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#user-name {
-    font: inherit;
-    border-radius: 8px;
-}
-
-#user-comment {
-    font: inherit;
-    border-radius: 8px;
-}
-
-#submit-comment {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-}
-
-#submit-comment:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.comments-controls {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-}
-
-button:disabled {
-    cursor: not-allowed;
-}
-
-.comments-controls {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-}
-
-#cast-info {
-    color: white;
-    text-decoration: underline;
-}
-
-#cast-info:hover {
-    color: #ff8623;
-}
-
-#similar-tv {
-    color: white;
-    text-decoration: underline;
-}
-
-#similar-tv:hover {
-    color: #ff8623;
-}
-
-#director-link {
-    color: white;
-    text-decoration: underline;
-}
-
-#director-link:hover {
-    color: #ff8623;
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 10px;
-    margin-top: 5px;
-}
-
-#toggle-filters-btn {
-    margin: 10px;
-    background-color: #7378c5;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.3s ease;
-    padding: 10px 20px;
-    font: inherit;
-}
-
-#toggle-filters-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease;
-}
-
-#movie-tv-filters, #people-filters, #tv-filters {
-    max-width: 500px;
-    margin: 4px auto;
-    padding: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    border: 2px solid #7378c5;
-    min-width: 290px;
-}
-
-#movie-tv-filters label, #movie-tv-filters select, #movie-tv-filters input[type="number"], #movie-tv-filters input[type="range"],
-#people-filters label, #people-filters select, #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters label, #tv-filters select, #tv-filters input[type="range"], #tv-filters input[type="number"] {
-    display: block;
-    width: 100%;
-    margin-bottom: 10px;
-    font-family: "Poppins", sans-serif;
-    color: #fff;
-}
-
-#movie-tv-filters label, #people-filters label, #tv-filters label {
-    margin-bottom: 5px;
-    font-size: 1rem;
-}
-
-#movie-tv-filters select, #people-filters select, #tv-filters select {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-tv-filters select:hover, #people-filters select:hover, #tv-filters select:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#movie-tv-filters select:focus, #people-filters select:focus, #tv-filters select:focus {
-    background-color: #7378c5;
-}
-
-#movie-tv-filters select:focus option:hover, #people-filters select:focus option:hover, #tv-filters select:focus option:hover {
-    background-color: #ff8623;
-}
-
-#movie-tv-filters input[type="number"], #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters input[type="range"], #tv-filters input[type="number"] {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-tv-filters input[type="number"]:hover, #people-filters input[type="range"]:hover, #people-filters input[type="number"]:hover, #tv-filters input[type="range"]:hover, #tv-filters input[type="number"]:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#reset-filters {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 25px;
-    border: none;
-    cursor: pointer;
-    color: white;
-    padding: 10px 15px;
-    margin-top: 30px;
-    display: block;
-    width: 100%;
-}
-
-#reset-filters:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#rating-filter {
-    vertical-align: top;
-}
-
-#movie-tv-filters span, #people-filters span {
-    font-weight: bold;
-    margin-left: 10px;
-}
-
-input[type=range] {
-    cursor: pointer;
-}
-
-#rating-value {
-    font: inherit;
-}
-
-.modal-header h3 {
-    flex-grow: 1;
-    text-align: center;
-    margin: 0;
-}
-
-.close {
-    cursor: pointer;
-    position: absolute;
-    right: 10px;
-}
-
-#year-filter::placeholder {
-    color: white;
-}
-
-#year-tv-filter::placeholder {
-    color: white;
-}
-
-#toggle-comment-modal, #prev-page, #next-page {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    color: white;
-}
-
-#toggle-comment-modal:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#prev-page:disabled, #next-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-#prev-page:disabled, #next-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-#prev-page:hover, #next-page:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#comments-section h3 {
-    text-align: center;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    padding-top: 100px;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0, 0, 0);
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-.modal-content {
-    position: relative;
-    background-color: #fefefe;
-    margin: auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    max-width: 500px;
-    border-radius: 10px;
-}
-
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-p {
-    text-align: center;
-    color: #a6967e;
-}
-
-.button2 {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    right: 18px;
-    position: absolute;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-}
-
-html {
-    scroll-behavior: smooth;
-    overflow-x: hidden;
-}
-
-.main2 {
-    text-align: center;
-    color: orange;
-    scroll-behavior: smooth;
-}
-
-.main2 p {
-    color: orange;
-}
-
-header {
-    background-color: transparent;
-    display: flex;
-    justify-content: flex-end;
-    padding: 1.5rem;
-}
-
-.search {
-    background-color: transparent;
-    border: 2px solid #121280;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-    width: 250px;
-}
-
-#main {
-    align-self: center;
-    margin-left: 45px;
-}
-
-.search::placeholder {
-    color: #7378c5;
-}
-
-#search:hover {
-    outline: none;
-    background-color: #22254b;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 100px;
-    padding-top: -20px;
-}
-
-header h1 {
-    color: #ff8623;
-    text-align: center;
-}
-
-#privacy-header {
-    color: #ff8623;
-    text-align: center;
-}
-
-.highlight {
-    color: orange;
-}
-
-.highlight:hover {
-    color: #ff8623;
-}
-
-.highlight2 {
-    color: orange;
-}
-
-.highlight2:hover {
-    color: #ff8623;
-}
-
-.search:focus {
-    outline: none;
-    background-color: #22254b;
-}
-
-.about {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 130px;
-    border-radius: 8px;
-    z-index: 999;
-}
-
-.header2 {
-    text-align: center;
-    align-self: center;
-    margin-left: 500px;
-}
-
-.back-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 41px;
-    border-radius: 8px;
-    z-index: 999;
-}
-
-.movie-card {
-    display: flex;
-    background: #fff;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.movie-image {
-    width: 150px;
-    height: 225px;
-    background-size: cover;
-    background-position: center;
-}
-
-.tvSeries-info {
-    padding: 20px;
-    flex-grow: 1;
-}
-
-.green {
-    color: #4CAF50;
-}
-
-.orange {
-    color: #FF9800;
-}
-
-.red {
-    color: #ff0000;
-}
-
-#profileBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    width: 100px;
-    top: 0;
-    margin-left: 316px;
-    border-radius: 8px;
-}
-
-#profileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#mobileGoogleSignInBtn {
-    display: none;
-}
-
-#mobileProfileBtn {
-    display: none;
-}
-
-@media screen and (max-width: 900px) {
-    #mobileGoogleSignInBtn {
-        display: block;
-    }
-
-    #mobileProfileBtn {
-        display: block;
-    }
-}
-
-.back-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.movie {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-    height: 555px;
-}
-
-.tvSeries {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-    height: 555px;
-}
-
-.movie img, .tvSeries img {
-    height: 435px;
-    width: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-.movie .overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-    text-align: center;
-}
-
-.tvSeries .overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.tvSeries-info h3 {
-    margin: 0;
-}
-
-.tvSeries:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.tvSeries-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.tvSeries-info span.green {
-    color: rgb(39,189,39);
-}
-
-.movie-info span.green {
-    color: rgb(39,189,39);
-}
-
-.tvSeries-info span.orange {
-    color: orange;
-}
-
-.movie-info span.orange {
-    color: orange;
-}
-
-.tvSeries-info span.red {
-    color: rgb(189,42,42);
-}
-
-.movie-info span.red {
-    color: rgb(189,42,42);
-}
-
-.overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.movie:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.overview h4 {
-    margin-top: 0;
-}
-
-.genres {
-    align-self: center;
-    margin-left: 15px;
-    color: #ff8623;
-}
-
-#other1:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.circle-text {
-    font-size: 25px;
-    font-weight: bold;
-    dominant-baseline: middle;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.about:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-#my-heading1 {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-@keyframes fadeInUp {
-    0% {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-#my-heading {
-    margin-bottom: -25px;
-    opacity: 0;
-    animation: fadeInUp 1s ease forwards;
-}
-
-#my-heading a {
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.highlight {
-    display: inline-block;
-    opacity: 0;
-    animation: fadeInUp 1s ease forwards 0.5s;
-}
-
-#trivia-btn {
-    position: fixed;
-    bottom: 60px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#trivia-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.button2:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#discussions-btn {
-    position: fixed;
-    bottom: 100px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#discussions-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-of-the-day-btn {
-    position: fixed;
-    bottom: 140px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#loadMoreButton {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    color: white;
-    margin-top: 20px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#loadMoreButton:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-of-the-day-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-of-the-day-btn2 {
-    position: fixed;
-    bottom: 80px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-of-the-day-btn2:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#button-search {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#button-search:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.details-container {
-    display: flex;
-    height: calc(100% - 60px);
-    color: white;
-    overflow-y: auto;
-    align-items: start;
-}
-
-.movie-left, .movie-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.actor-left, .actor-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    margin: 20px;
-}
-
-.director-left, .director-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    margin: 20px;
-}
-
-#actor-name {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    margin-top: -10px;
-}
-
-.movie-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.movie-left img {
-    height: auto;
-}
-
-.actor-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.director-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.movie-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-bottom: 50px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    height: 100%;
-}
-
-.actor-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-top: 70px;
-}
-
-.director-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-top: 40px;
-}
-
-.movie-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-    margin-right: 5px;
-}
-
-.movie-link:hover {
-    color: #ff8623;
-}
-
-.movie-image {
-    width: 100%;
-    height: auto;
-    border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-}
-
-@media (max-width: 768px) {
-    .movie-image {
-        height: auto;
-    }
-    #actor-image {
-        height: auto;
-    }
-}
-
-.movie-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.actor-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#rating {
-    color: inherit;
-}
-
-#rating:hover {
-    color: #ff8623;
-}
-
-#metacritics {
-    color: inherit;
-}
-
-#metacritics:hover {
-    color: #ff8623;
-}
-
-.director-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.adult-indicator {
-    color: red;
-    font-weight: bold;
-}
-
-.general-indicator {
-    color: green;
-    font-weight: bold;
-}
-
-.movie-description {
-    font-size: 1rem;
-    color: white;
-    width: 100%;
-}
-
-.companies-section {
-    margin-top: 20px;
-}
-
-.companies-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.company-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-@media (max-width: 768px) {
-    .company-item {
-        max-width: 125px;
-    }
-}
-
-.company-logo {
-    max-width: 100px;
-    max-height: 75px;
-    height: auto;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.company-item:hover {
-    transform: scale(1.07);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.company-details {
-    width: 100%;
-}
-
-.company-name {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-    white-space: normal;
-    text-align: center;
-}
-
-.actor-description {
-    font-size: 1rem;
-    color: white;
-    transform: translateY(10%);
-}
-
-.director-description {
-    font-size: 1rem;
-    color: white;
-    transform: translateY(10%);
-}
-
-.streaming-logo {
-    display: inline-flex;
-    align-items: flex-end;
-    vertical-align: bottom;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.streaming-logo img {
-    width: 50px;
-    margin-left: 10px;
-    transition: transform 0.3s ease;
-}
-
-.streaming-logo:hover {
-    transform: scale(1.1);
-    cursor: pointer;
-}
-
-.movie-rating {
-    margin-top: 100px;
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#user-ratings {
-    color: inherit;
-}
-
-#user-ratings:hover {
-    color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-#userRatings {
-    color: inherit;
-}
-
-#userRatings:hover {
-    color: #ff8623;
-}
-
-#githubLink {
-    color: white !important;
-}
-
-#githubLink1 {
-    color: black !important;
-}
-
-#githubLink1:hover {
-    color: #ff8623 !important;
-    transition: 0.1s ease-in;
-}
-
-#githubLink2 {
-    color: white !important;
-}
-
-#githubLink2: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;
-}
-
-.modal-overlay {
-    display: none;
-    position: fixed;
-    z-index: 100000000002;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0,0,0);
-    background-color: rgba(0,0,0,0.4);
-    justify-content: center;
-    align-items: center;
-}
-
-.modal-visible {
-    display: flex !important;
-}
-
-.pin-btn {
-    color: #ff8623;
-}
-
-.pin-btn:hover {
-    color: #c45c00;
-}
-
-.pin-btn.pinned {
-    color: #7378c5;
-}
-
-.spinner {
-    border: 4px solid #000;
-    border-radius: 50%;
-    border-top: 5px solid #ff8623;
-    width: 100px;
-    height: 100px;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-#githubLink:hover {
-    color: #ff8623 !important;
-    transition: 0.1s ease-in;
-}
-
-#imdbRating, #rtRating {
-    text-decoration: none;
-    color: inherit;
-    font-size: 2.5rem;
-    font-weight: bold;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#imdbRating:hover {
-    color: #ff8623;
-}
-
-#rtRating:hover {
-    color: #ff8623;
-}
-
-#movie-rating h2:hover {
-    color: initial;
-}
-
-h2 {
-    font-size: 1.74rem;
-}
-
-h2:hover {
-    color: orange;
-    transition: 0.1s linear;
-}
-
-p {
-    color: white;
-}
-
-.similar-movies-container h3 {
-    color: #E0E0E0;
-}
-
-.similar-movies span:hover {
-    text-decoration: none;
-    opacity: 0.8;
-    color: #ff8623;
-}
-
-.movie-details-body {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: repeat;
-}
-
-.movie-details-body2 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-position: center;
-    height: 100vh;
-    background-size: auto;
-    background-repeat: repeat;
-}
-
-.movie-details-body3 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-}
-
-.movie-details-body4 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-}
-
-.favorites-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 219px;
-    border-radius: 8px;
-    padding-left: 10px;
-    padding-right: 10px;
-    box-sizing: border-box;
-    z-index: 999;
-    max-width: 95px;
-}
-
-#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;
-}
-
-#searchContainer {
-    position: relative;
-    display: inline-block;
-}
-
-#averageDisplays {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 20px;
-    width: 100%;
-}
-
-.progress-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 20px;
-    flex: 1;
-    text-align: center;
-}
-
-.progress-ring {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.progress-ring__circle {
-    fill: transparent;
-    stroke-width: 10;
-    stroke: #fff;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-}
-
-.progress-ring__progress {
-    fill: transparent;
-    stroke-width: 10;
-    stroke: var(--progress-color);
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-    transition: stroke-dashoffset 0.6s ease-out;
-}
-
-.progress-ring__text {
-    font-size: 20px;
-    dominant-baseline: middle;
-    text-anchor: middle;
-    opacity: 0;
-    transition: opacity 0.6s ease-out;
-}
-
-strong {
-    font-weight: bold;
-}
-
-.favorites-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#favorite-btn {
-    background-color: rgba(255, 255, 255, 0.05);
-    color: grey;
-    margin-left: 10px;
-    border-radius: 8px;
-    width: 40px;
-    box-shadow: none;
-    position: relative;
-    cursor: pointer;
-}
-
-#favorite-btn:hover {
-    background-color: #dcdcdc;
-}
-
-.tooltip-text {
-    visibility: hidden;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    bottom: 125%;
-    left: 10%;
-    margin-left: -90px;
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.tooltip-text::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #555 transparent transparent transparent;
-}
-
-.title-favorites-container {
-    display: flex;
-    align-items: center;
-    overflow: visible;
-}
-
-#favorite-btn.favorited {
-    color: red;
-}
-
-#favorites-main {
-    margin-left: 15px;
-}
-
-#favorite-btn:hover::after {
-    content: "Favorite / Unfavorite";
-    position: absolute;
-    top: -45px;
-    left: 50%;
-    width: 55px;
-    transform: translateX(-70%);
-    background-color: #232323;
-    color: white;
-    padding: 5px;
-    border-radius: 5px;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 10;
-}
-
-#main2 {
-    text-align: center;
-    max-width: 800px;
-    margin: auto;
-    padding: 20px;
-    margin-bottom: 300px;
-}
-
-#main2 h2, #main2 h3 {
-    color: #ff8623;
-    margin-bottom: 20px;
-}
-
-#aboutHeader {
-    margin-top: -25px;
-}
-
-#main2 p, #main2 ul, #main2 li {
-    text-align: left;
-    margin: auto;
-    max-width: 800px;
-    color: #ff8623;
-}
-
-#main2 ul {
-    list-style: none;
-    padding: 0;
-}
-
-#main2 li {
-    background-color: #f0f0f0;
-    border: 1px solid #ddd;
-    margin-top: 10px;
-    padding: 10px;
-    border-radius: 5px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: black;
-    align-items: center;
-}
-
-#main2 li:hover {
-    background-color: #e6e6e6;
-}
-
-#main2 a {
-    color: #7378c5;
-    text-decoration: none;
-}
-
-#main2 a:hover {
-    text-decoration: underline;
-}
-
-.app-link {
-    margin-top: 20px;
-    text-align: center;
-}
-
-.app-link button {
-    background-color: #f0f0f0;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 10px 15px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: black;
-    cursor: pointer;
-    font-size: 16px;
-    display: block;
-    width: auto;
-    margin: 10px auto;
-}
-
-.app-btn {
-    background-color: #7378c5;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 10px 15px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: white;
-    cursor: pointer;
-    font: inherit;
-    display: block;
-    width: auto;
-    margin: 10px auto;
-    transition: 0.1s ease-in;
-}
-
-.clock {
-    text-align: center;
-    font-size: 20px;
-    color: #ff8623;
-}
-
-.clock:hover {
-    color: #ff8623;
-}
-
-#time-label {
-    color: #ff8623;
-}
-
-#time-label:hover {
-    color: #ff8623;
-}
-
-.app-btn:hover {
-    background-color: #ff8623;
-}
-
-.app-link button:hover {
-    background-color: #e6e6e6;
-}
-
-.app-link p {
-    margin-top: 10px;
-    color: white;
-}
-
-.side-nav {
-    position: fixed;
-    left: -250px;
-    top: 0;
-    width: 250px;
-    height: 100%;
-    background-color: #373b69;
-    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
-    overflow-y: auto;
-    transition: left 0.39s;
-    z-index: 1000;
-}
-
-.side-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.side-nav ul li {
-    padding: 15px 20px;
-    border-radius: 8px;
-}
-
-.side-nav ul li a {
-    color: white;
-    text-decoration: none;
-    display: block;
-    padding-left: 5px;
-}
-
-.side-nav ul li a:hover {
-    background-color: #ff8623;
-    border-radius: 8px;
-}
-
-.nav-toggle {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    cursor: pointer;
-    font-size: 1.5rem;
-    top: 5px;
-    left: 15px;
-    border-radius: 8px;
-    padding: 3.5px;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    display: flex;
-    position: fixed;
-    justify-content: center;
-    align-items: center;
-    padding-left: 4.25px;
-}
-
-.nav-toggle i {
-    line-height: inherit;
-}
-
-.nav-toggle:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#button-container {
-    text-align: center;
-}
-
-#button-remove {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#button-remove:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#trailerButton {
-    color: #fff;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#trailerButton:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.trailer-button {
-    display: block;
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-    width: fit-content;
-    font-size: 1rem;
-}
-
-.trailer-button:hover {
-    background-color: #ff8623;
-}
-
-.cast-container {
-    margin-top: 20px;
-}
-
-.actor {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor:hover {
-    color: #0056b3;
-}
-
-.actor-item {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor-item:hover {
-    color: #0056b3;
-}
-
-.cast-container {
-    margin-top: 20px;
-}
-
-.actor-link {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor-link:hover {
-    color: #0056b3;
-}
-
-.cast-list {
-    white-space: nowrap;
-    overflow-x: auto;
-    margin-top: 10px;
-}
-
-.actor-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.watchlist-buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 60px;
-    margin-left: 30px;
-}
-
-.watchlist-buttons-container button {
-    margin: 0 10px;
-    background-color: #7378c5;
-    font: inherit;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.1s ease-in;
-}
-
-#button {
-    margin: 0 10px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.1s ease-in;
-}
-
-#button:hover {
-    background-color: #ff8623;
-}
-
-.watchlist-buttons-container button:hover {
-    background-color: #ff8623;
-}
-
-#search-container {
-    display: none;
-    background-color: rgba(255, 255, 255, 0.1);
-    padding: 15px;
-    border-radius: 8px;
-    color: white;
-    margin: 10px;
-}
-
-#movie-match-container1 {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0;
-    padding: 0;
-    top: 0;
-    margin: 0;
-}
-
-.checkbox-container {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.checkbox-container label {
-    margin-top: 6px;
-}
-
-.active-category {
-    background-color: #ff8623;
-    color: white;
-}
-
-.nav-button {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.nav-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#menu-btn {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-    font-size: 14px;
-    z-index: 1000000002 !important;
-}
-
-#menu-btn i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-#menu-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#settings-container {
-    background-color: rgba(255, 255, 255, 0.1);
-    padding: 15px;
-    border-radius: 32px;
-    color: white;
-    margin: 5px auto;
-    max-width: 500px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-@media (max-width: 700px) {
-    #settings-container {
-        max-width: calc(100% - 10px);
-        margin: 10px 10px;
-    }
-}
-
-#chat-button,
-#settings-btn,
-#movie-of-the-day-btn,
-#movie-match-btn,
-#movie-match-btn3,
-#movie-timeline-btn,
-#discussions-btn,
-#trivia-btn,
-#back-to-top-btn {
-    transition: transform 0.5s ease, opacity 0.5s ease;
-    transform: translateY(20px);
-    opacity: 0;
-    display: none;
-}
-
-@media (min-width: 768px) {
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #movie-match-btn3,
-    #trivia-btn,
-    #back-to-top-btn {
-        position: fixed;
-        right: 10px;
-        z-index: 1000;
-    }
-
-    #menu-btn {
-        display: block;
-    }
-}
-
-.mobile-bottom-bar {
-    display: none;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    background-color: #7378c5;
-    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
-    justify-content: space-around;
-    align-items: center;
-    z-index: 100000222;
-    transition: transform 0.09s ease-in-out;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-}
-
-.hide-bar {
-    transform: translateY(100%);
-}
-
-.mobile-bottom-bar a {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    text-align: center;
-    color: white;
-    text-decoration: none;
-    padding: 6px 0;
-    width: 15%;
-}
-
-.mobile-bottom-bar a:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.mobile-bottom-bar i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-.mobile-bottom-bar span {
-    display: block;
-    font-size: 10px;
-    color: #ecf0f1;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #trivia-btn,
-    #menu-btn,
-    #back-to-top-btn {
-        display: none;
-    }
-}
-
-.nav-button:disabled {
-    background-color: #b5b5b5;
-    cursor: not-allowed;
-}
-
-.search-users-container {
-    text-align: center;
-    margin: 20px auto;
-    background-color: rgba(55, 59, 105, 0.8);
-    padding: 15px;
-    border-radius: 8px;
-    max-width: 500px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    color: white;
-    font: inherit;
-}
-
-.search-users-container input[type="text"] {
-    width: 70%;
-    padding: 10px;
-    margin-right: 10px;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-    font: inherit;
-}
-
-.search-users-container button {
-    padding: 10px 20px;
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    color: white;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    font: inherit;
-}
-
-.search-users-container button:hover {
-    background-color: #ff8623;
-}
-
-.search-results-container {
-    display: none;
-    background-color: rgba(211, 211, 211, 0.5);
-    max-width: 500px;
-    margin: 10px auto;
-    padding: 10px;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    text-align: left;
-}
-
-#viewMyProfileBtn {
-    display: block;
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 20px;
-    margin: 20px auto;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    font: inherit;
-}
-
-#viewMyProfileBtn:hover {
-    background-color: #ff8623;
-}
-
-.user-search-result {
-    background-color: rgba(55, 59, 105, 0.8);
-    margin: 10px auto;
-    padding: 10px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    color: white;
-    transition: background-color 0.3s ease;
-    height: 100px;
-    max-width: 400px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-}
-
-.user-search-result:hover {
-    background-color: #ff8623;
-}
-
-.user-search-result img {
-    width: auto;
-    height: 95%;
-    max-height: 100px;
-    margin-right: 10px;
-    border-radius: 8px;
-    object-fit: contain;
-}
-
-#userLink {
-    color: black;
-}
-
-#userLink:hover {
-    color: #ff710d;
-}
-
-#chat-button {
-    background-color: #7378c5;
-    bottom: 325px;
-    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);
-}
-
-#chat-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-.user-search-result div {
-    width: 67%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: left;
-}
-
-.user-search-result strong {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.user-search-result p {
-    margin: 0;
-    font-size: 0.9rem;
-}
-
-.pagination {
-    border-radius: 8px;
-    background-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-}
-
-@media (max-width: 767px) {
-    .genres + main + .pagination {
-        text-align: center;
-    }
-
-    .pagination {
-        position: relative;
-        width: calc(100% - 20px);
-        margin-top: 20px;
-    }
-}
-
-.page-button {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    margin: 2px;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    font: inherit;
-    font-size: 12.9px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-.page-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.page-button.active {
-    background-color: #4a4e8c;
-}
-
-.page-button:disabled {
-    background-color: #b5b5b5;
-    cursor: default;
-}
-
-#search-results-label {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-#search-results-label:hover {
-    color: #ff8623;
-}
-
-.category-buttons button {
-    background-color: #7378c5;
-    font: inherit;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    margin: 10px;
-    transition: 0.1s ease-in;
-}
-
-.category-buttons button:hover {
-    background-color: #534caf;
-}
-
-.watchlist {
-    background-color: rgba(255, 255, 255, 0.1);
-    margin: 10px;
-    padding: 15px;
-    border-radius: 8px;
-    color: white;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-}
-
-.watchlist-title {
-    font-size: 1.5rem;
-    color: #ff8623;
-    text-align: center;
-}
-
-.watchlist-description {
-    font-size: 1rem;
-    margin-bottom: 10px;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.modal-content {
-    background-color: #373b69;
-    margin: 15% auto;
-    padding: 20px;
-    border-radius: 8px;
-    width: 50%;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-}
-
-.modal-content h2 {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.modal-content label {
-    color: #fff;
-    margin-bottom: 10px;
-    display: block;
-}
-
-.modal-content input[type="text"],
-.modal-content textarea {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 5px;
-    border: 1px solid #7378c5;
-    background-color: #22254b;
-    color: #fff;
-}
-
-.modal-content button {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font: inherit;
-    display: block;
-    margin: 10px auto;
-    transition: background-color 0.3s ease;
-}
-
-.modal-content select {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 5px;
-    border: 1px solid #7378c5;
-    background-color: #22254b;
-    color: #fff;
-}
-
-.modal-content button:hover {
-    background-color: #ff8623;
-}
-
-.modal-content {
-    position: relative;
-    background-color: #373b69;
-    margin: 15% auto;
-    padding: 20px;
-    border-radius: 8px;
-    width: 50%;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-}
-
-.modal-content h2 {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.modal-content .close-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    color: #fff;
-    cursor: pointer;
-}
-
-.modal-content label {
-    color: #fff;
-    margin-bottom: 10px;
-    display: block;
-}
-
-#subheading:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#aboutHeader:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#profileLink {
-    color: white !important;
-    text-decoration: underline !important;
-}
-
-#profileLink:hover {
-    color: #ff8623 !important;
-    transition: 0.1s linear;
-}
-
-textarea {
-    resize: none;
-}
-
-.close-button {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close-button:hover {
-    color: #ff8623;
-}
-
-.close-button:hover,
-.close-button:focus {
-    color: #ff8623;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.actor-link:hover {
-    color: #ff8623;
-}
-
-.genres {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-#discussion-input {
-    background-color: transparent;
-    border: 2px solid #ff8623;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-}
-
-#discussion-input:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#post-btn {
-    background-color: #ff8623;
-    font: inherit;
-}
-
-#post-btn:hover {
-    background-color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-ol li:hover {
-    color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-#chatbotContainer {
-    width: 95%;
-    max-width: 600px;
-    background-color: rgba(0, 0, 0, 0.7);
-    margin: 20px auto;
-    border-radius: 8px;
-    padding: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-#chatbotHeader {
-    background-color: #ff8623;
-    color: white;
-    padding: 10px;
-    text-align: center;
-    border-radius: 8px;
-    margin-top: 10px;
-}
-
-#chatbotBody {
-    overflow-y: auto;
-    max-height: 300px;
-    padding: 10px;
-    border-radius: 8px;
-    color: white;
-    word-wrap: break-word;
-    box-sizing: border-box;
-    margin-top: 10px;
-    border: 1px solid #ff8623;
-}
-
-#sendButton {
-    padding: 10px;
-    margin-top: 10px;
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: 1rem;
-    color: white;
-    background-color: #ff8623;
-    border: none;
-    cursor: pointer;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-#sendButton:hover {
-    background-color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-#chatbotInput {
-    width: 100%;
-    padding: 10px 20px;
-    border: 1px solid #ff8623;
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: 1rem;
-    background-color: transparent;
-    color: white;
-    margin-top: 10px;
-    box-sizing: border-box;
-}
-
-.highlight1 {
-    color: orange;
-}
-
-#chatbotInput:focus {
-    outline: none;
-}
-
-#bot-header {
-    text-align: center;
-    width: 100%;
-}
-
-#chatbotBody > div {
-    margin-bottom: 10px;
-    padding: 5px 10px;
-    border-radius: 5px;
-}
-
-@media (max-width: 705px) {
-    #search-title,
-    #alt-title {
-        display: none;
-    }
-}
-
-@media (max-height: 930px) {
-    #search-title,
-    #alt-title {
-        display: none;
-    }
-}
-
-#chatbotBody > div[text-align="right"] {
-    background-color: #ff8623;
-    align-self: flex-end;
-}
-
-#chatbotBody > div[text-align="left"] {
-    background-color: #7378c5;
-    align-self: flex-start;
-}
-
-@media (max-width: 767px) {
-    #chatbotContainer {
-        top: 56.1%
-    }
-}
-
-#change-director-btn {
-    padding: 5px 10px;
-    cursor: pointer;
-    border: none;
-    background-color: #7378c5;
-    font: inherit;
-    color: #000000;
-    border-radius: 8px;
-}
-
-#movie-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#movie-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#actor-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#actor-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#director-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#director-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#company-logo {
-    z-index: 100000000;
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#rating-link {
-    color: white;
-}
-
-#rating-link:hover {
-    color: #ff8623;
-}
-
-#company-logo:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#change-director-btn:hover {
-    background-color: #ff8623;
-}
-
-#trailerContainer {
-    width: 560px;
-    height: 315px;
-    overflow: hidden;
-    transition: max-height 0.5s ease;
-}
-
-#removeBtn {
-    color: white;
-}
-
-#removeBtn:hover {
-    color: #ff8623;
-}
-
-.director-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.director-link:hover {
-    color: #ff8623;
-}
-
-@media (max-width: 982px) {
-    #local-time {
-        display: none;
-    }
-}
-
-#custom-bg-upload {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    border: 2px solid #7378c5;
-    background-color: #22254b;
-    color: white;
-    font-size: 16px;
-    margin-bottom: 10px;
-    cursor: pointer;
-}
-
-#movie-details-container {
-    margin-top: 10px;
-}
-
-#custom-bg-name {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    border: 2px solid #7378c5;
-    background-color: #22254b;
-    color: white;
-    font-size: 16px;
-    margin-bottom: 10px;
-}
-
-#upload-bg-btn {
-    background-color: #ff8623;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    font-size: 1rem;
-    border-radius: 8px;
-    cursor: pointer;
-    margin: 20px auto;
-    display: block;
-}
-
-.chart-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    padding: 20px;
-    justify-content: center;
-}
-
-.chart-box {
-    background-color: rgba(255, 255, 255, 0.5);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    padding: 20px;
-    width: 100%;
-    max-width: 600px;
-    height: 400px;
-    margin: 20px auto;
-    opacity: 1;
-}
-
-canvas {
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-}
-
-@media screen and (max-width: 900px) {
-    .chart-container {
-        flex-direction: column;
-    }
-
-    .chart-box {
-        height: auto;
-    }
-}
-
-#ratingImdb {
-    color: #ff710d;
-    font-size: 17px;
-}
-
-#ratingImdb:hover {
-    color: #ff8623;
-}
-
-.chart-title {
-    text-align: center;
-    color: #ff710d;
-    margin-bottom: 15px;
-}
-
-#descriptionP {
-    margin-top: -10px;
-}
-
-#upload-bg-btn:hover {
-    background-color: #7378c5;
-    transition: background-color 0.3s ease;
-}
-
-#settings-btn {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#settings-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-@media (max-width: 1000px) {
-    #comments-section {
-        margin-bottom: 210px;
-    }
-}
-
-#local-time {
-    transform: translateX(10%);
-    padding: 10px;
-    border-radius: 10px;
-    z-index: 10;
-}
-
-#mobileProfileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-@media (max-width: 800px) {
-    #my-heading {
-        margin-left: 0;
-    }
-
-    #movie-details-body3 {
-        background-image: url("https://movie-verse.com/images/universe-1.webp");
-        background-position: center;
-        height: 100vh;
-        background-size: auto;
-        background-repeat: repeat;
-        width: 100vw;
-    }
-
-    #profileBtn {
-        display: none;
-    }
-
-    #indexLink {
-        margin-bottom: -15px;
-    }
-
-    .back-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: -180px;
-        border-radius: 8px;
-    }
-
-    .about {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 0;
-        border-radius: 8px;
-    }
-
-    .favorites-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        width: 95px;
-        margin-left: 188px;
-        border-radius: 8px;
-        padding-left: 10px;
-        padding-right: 10px;
-        box-sizing: border-box;
-    }
-
-    #googleSignInBtn {
-        display: none;
-    }
-
-    .movie-details-body {
-        min-height: 100% !important;
-    }
-
-    .movie-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .actor-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .director-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .details-container {
-        flex-direction: column;
-    }
-
-    #movie-details-container {
-        margin-top: 15px;
-    }
-
-    .movie-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .actor-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .director-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .movie-left, .movie-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .actor-left, .actor-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .director-left, .director-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .movie-right {
-        margin-top: 0;
-        height: 100% !important;
-        overflow: visible;
-        margin-bottom: 5px;
-    }
-
-    #descriptionP {
-        margin-top: -100px;
-    }
-
-    .actor-right {
-        margin-top: -20px;
-        height: 100% !important;
-        overflow: visible;
-    }
-
-    .director-right {
-        margin-top: -20px;
-        height: 100% !important;
-        overflow: visible;
-    }
-
-    header {
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    main {
-        margin-bottom: -40px;
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    #clear-search-btn {
-        margin-top: 5px;
-    }
-
-    .watchlist-buttons-container {
-        margin-left: -3px;
-    }
-
-}
-
-.year-input-container {
-    margin: 20px;
-}
-
-.year-input {
-    width: 150px;
-    padding: 10px;
-    margin: 5px;
-    border-radius: 5px;
-    border: 1px solid #ddd;
-}
-
-#load-movies {
-    padding: 10px 10px;
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#load-movies:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.movie-card {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-}
-
-#form {
-    margin-top: 20px;
-}
-
-#form1 {
-    margin-top: 5px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.movie-card img {
-    width: 100%;
-}
-
-.movie-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-    padding-top: 14px;
-    flex-grow: 1;
-}
-
-.tvSeries-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-}
-
-.movie-info h3 {
-    margin: 0;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.timeline-container {
-    margin: 20px auto;
-    background-color: rgba(255,255,255,0.1);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    padding: 20px;
-    width: calc(100% - 24px);
-    border-radius: 16px;
-    margin-top: 50px;
-    text-align: center;
-}
-
-#movie-timeline-btn {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    cursor: pointer;
-}
-
-#movie-timeline-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movies-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-    flex-direction: column;
-}
-
-#tvseries-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-    flex-direction: column;
-}
-
-#tvseries-container .movie-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-#movies-container1 {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-#movies-container .movie-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.movies-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 20px;
-}
-
-.center-container {
-    text-align: center;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-}
-
-.center-container1 {
-    text-align: center;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-}
-
-#load-movies {
-    cursor: pointer;
-    font: inherit;
-}
-
-#select-text {
-    margin-top: 30px;
-    color: #ff8623;
-}
-
-#select-text:hover {
-    color: #ff8623;
-}
-
-#clear-search-btn {
-    background-color: #7378c5;
-    color: black;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-left: 10px;
-    font: inherit;
-    margin-right: 20px;
-}
-
-#clear-search-btn:hover {
-    background-color: #ff8623;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-    body {
-        background-size: auto;
-        background-repeat: repeat;
-    }
-}
-
-#search-title {
-    color: #ff8623;
-    text-align: center;
-    font-size: 1.74rem;
-    margin-bottom: 20px;
-}
-
-#search-title:hover {
-    color: #ff8623;
-}
-
-#search-title1 {
-    color: #ff8623;
-    text-align: center;
-    font-size: 1.74rem;
-    margin-bottom: 20px;
-}
-
-#search-title1:hover {
-    color: #ff8623;
-}
-
-#movie-match-main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-    margin-top: 60px;
-    padding: 20px;
-    width: 100%;
-    margin-bottom: 300px;
-}
-
-.profile-container {
-    text-align: center;
-    margin-top: 20px;
-}
-
-.profile-image-container img {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.profile-info p {
-    margin: 10px 0;
-}
-
-body {
-    overflow-x: hidden;
-    max-width: 100%;
-}
-
-#googleSignInBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 420px;
-    border-radius: 8px;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-.mobile-sign-in-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 12px;
-    margin-bottom: 10px;
-}
-
-#mobileGoogleSignInBtn {
-    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;
-}
-
-#mobileProfileBtn {
-    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;
-}
-
-#mobileGoogleSignInBtn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-.movie-match-container {
-    max-width: 500px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 15px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-#movie-match-form {
-    background-color: transparent;
-    border: 2px solid #7378c5;
-    border-radius: 50px;
-    padding: 20px;
-    max-width: 500px;
-    margin: auto;
-}
-
-#movie-match-form label, #movie-match-form select, #movie-match-form input[type="submit"] {
-    display: block;
-    width: 100%;
-    margin-bottom: 10px;
-    font-family: "Poppins", sans-serif;
-    color: #fff;
-}
-
-#movie-match-form label {
-    margin-bottom: 5px;
-    font-size: 1rem;
-}
-
-#movie-match-form select {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-match-form input[type="submit"] {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 25px;
-    border: none;
-    cursor: pointer;
-    color: white;
-    padding: 10px 15px;
-    margin-top: 30px;
-}
-
-#movie-match-form input[type="submit"]:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#movie-match-btn2 {
-    position: fixed;
-    bottom: 115px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn2:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-match-btn3 {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn3:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-match-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.company-left, .company-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    text-align: center;
-}
-
-.company-left {
-    width: 33.33%;
-}
-
-.company-right {
-    width: 66.67%;
-}
-
-#company-movies-list {
-    text-align: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding: 10px;
-}
-
-#company-movies-list span {
-    margin: 0;
-}
-
-.company-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.company-link:hover {
-    color: #ff8623;
-}
-
-.title-logo-container {
-    text-align: center;
-    align-items: center;
-    margin-bottom: 20px;
-}
-
-.company-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.company-description {
-    margin-top: 20px;
-}
-
-.company-description, #company-headquarters, #company-country, #company-website {
-    color: white;
-    margin-bottom: 10px;
-}
-
-#company-website:hover {
-    color: #ff8623;
-}
-
-.movies-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-
-.movies-list a {
-    color: white;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.movies-list a:hover {
-    color: purple;
-}
-
-@media (max-width: 800px) {
-    .company-details-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .company-left {
-        width: 100%;
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .company-right {
-        width: 100%;
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .company-left img {
-        max-width: 100%;
-        height: auto;
-    }
-}
-
-#button-clear {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 15px;
-    font: inherit;
-    cursor: pointer;
-    margin-left: 10px;
-    color: #000000;
-    margin-right: 40px;
-}
-
-#rating-value:hover {
-    color: #ff8623;
-}
-
-#button-clear:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.rating {
-    display: flex;
-    justify-content: flex-end;
-    direction: rtl;
-    color: grey;
-    font-size: 20px;
-}
-
-.rating .star {
-    color: white;
-    cursor: pointer;
-    transition: color 200ms;
-}
-
-.rating .star:hover,
-.rating .star:hover ~ .star {
-    color: gold;
-}
-
-@keyframes shake {
-    0% { transform: translateX(0); }
-    20% { transform: translateX(-5px); }
-    40% { transform: translateX(5px); }
-    60% { transform: translateX(-5px); }
-    80% { transform: translateX(5px); }
-    100% { transform: translateX(0); }
-}
-
-.shake-animation {
-    animation: shake 0.5s ease-in-out 5;
-}
-
-.search-results {
-    display: flex;
-    flex-direction: column;
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-#form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.search-container {
-    display: flex;
-    align-items: center;
-}
-
-#search-results {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-.search-result-card {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #7378c5;
-    margin-bottom: 2px;
-    margin-top: 5px;
-    width: 300px;
-    color: #212121;
-}
-
-.search-result-card:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.buttons-container button {
-    padding-left: 20px;
-}
-
-#clear-search {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    padding: 5px 10px;
-    margin-top: 10px;
-    margin-left: 20px;
-}
-
-#clear-search:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#view-all-results {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 5px 10px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    margin-top: 10px;
-}
-
-#view-all-results:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.result-image {
-    width: 64px;
-    height: 96px;
-    object-fit: cover;
-    border-radius: 4px;
-}
-
-.result-details {
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-}
-
-.result-name {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.result-type {
-    font-size: 14px;
-    font-style: italic;
-    color: #212121;
-}
-
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-    color: white;
-    transition: 0.3s ease-in;
-}
-
-#footer:hover {
-    cursor: pointer;
-}
-
-.notification-btn {
-    position: fixed;
-    top: 5px;
-    right: 20px;
-    z-index: 100;
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    cursor: pointer;
-    padding: 9px;
-    border-radius: 8px;
-    transition: 0.1s ease-in;
-}
-
-#closeModalButton {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 16px;
-    text-align: center;
-    transition: 0.1s ease-in;
-}
-
-#closeModalButton:hover {
-    background-color: #ff8623;
-}
-
-#closeModalButton {
-    margin: 10px auto;
-    display: block;
-}
-
-.notification-btn:hover {
-    background-color: #ff8623;
-}
-
-.notification-modal {
-    position: fixed;
-    top: 50px;
-    right: 20px;
-    background-color: #7378c5;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    padding: 20px;
-    width: 300px;
-    z-index: 1002;
-    color: white;
-}
-
-@media (max-width: 900px) {
-    .notification-modal {
-        right: 12.5px;
-    }
-
-    .notification-btn {
-        right: 12.5px;
-    }
-}
-
-.notification-link:hover {
-    color: #ff8623 !important;
-}
-
-.notification-modal h4 {
-    margin: 0;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
-}
-
-.notification-modal ul {
-    list-style: none;
-    padding: 0;
-    margin-top: 10px;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.notification-modal ul li {
-    padding: 10px 0;
-    border-bottom: 1px solid #eee;
-}
-
-#comments-section {
-    background-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    border-radius: 10px;
-    padding: 20px;
-    margin: 20px 0;
-    max-width: calc(100% - 20px);
-}
-
-@keyframes dropIn {
-    0% {
-        opacity: 0;
-        transform: translateY(-50px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-#my-heading {
-    margin-bottom: -25px;
-    opacity: 0;
-    animation: dropIn 1s ease forwards;
-}
-
-#my-heading a {
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.highlight {
-    display: inline-block;
-    opacity: 0;
-    animation: dropIn 1s ease forwards 1s;
-}
-
-#local-time {
-    cursor: pointer;
-    opacity: 0;
-    animation: dropIn 1s ease forwards 1.5s;
-}
-
-#local-time p,
-#local-time div {
-    opacity: 0;
-    animation: dropIn 1s ease forwards 2s;
-}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/trivia.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/trivia.css
deleted file mode 100644
index 6a40c7c3..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/trivia.css
+++ /dev/null
@@ -1,1157 +0,0 @@
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-}
-
-#footerP {
-    color: white !important;
-}
-
-#footerP:hover {
-    transition: 0.1s ease-in;
-    color: #ff8623 !important;
-}
-
-@media (max-width: 900px) {
-    #local-time {
-        display: none;
-    }
-}
-
-body {
-    color: #ff903a;
-    font-family: "Poppins", sans-serif;
-    margin: 0;
-    align-content: center;
-    text-align: center;
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    overflow-x: hidden;
-}
-
-html {
-    scroll-behavior: smooth;
-    overflow-x: hidden;
-}
-
-#profileBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    width: 100px;
-    top: 0;
-    margin-left: 316px;
-    border-radius: 8px;
-}
-
-#profileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-results {
-    display: flex;
-    flex-direction: column;
-    max-width: 600px;
-    margin: 0 auto;
-    align-items: center;
-}
-
-#form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.search-container {
-    display: flex;
-    align-items: center;
-}
-
-.search-result-card {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #7378c5;
-    margin: 0;
-    margin-bottom: 2px;
-    margin-top: 5px;
-    width: 300px;
-    color: #212121;
-}
-
-.search-result-card:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-.buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.buttons-container button {
-    padding-left: 20px;
-}
-
-#clear-search {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    padding: 5px 10px;
-    margin-top: 10px;
-    margin-left: 20px;
-}
-
-#clear-search:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#view-all-results {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 5px 10px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    margin-top: 10px;
-}
-
-#view-all-results:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.result-image {
-    width: 64px;
-    height: 96px;
-    object-fit: cover;
-    border-radius: 4px;
-}
-
-.result-details {
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-}
-
-.result-name {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.result-type {
-    font-size: 14px;
-    font-style: italic;
-    color: #212121;
-}
-
-#googleSignInBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 420px;
-    border-radius: 8px;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-#googleSignInBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-}
-
-#submit {
-    background-color: #7378c5;
-    font: inherit;
-    margin-bottom: 39px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#submit:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-#regenerate-questions {
-    background-color: #7378c5;
-    font: inherit;
-    margin-bottom: 39px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#regenerate-questions:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-timeline-btn {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-timeline-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-of-the-day-btn {
-    position: fixed;
-    bottom: 140px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-of-the-day-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#discussions-btn {
-    position: fixed;
-    bottom: 100px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#discussions-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-p {
-    text-align: center;
-    color: #ff8623;
-}
-
-.highlight:hover {
-    color: #ff8623;
-}
-
-.button2 {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    right: 18px;
-    position: absolute;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-.main2 {
-    text-align: center;
-    color: orange;
-    scroll-behavior: smooth;
-}
-
-.main2 p {
-    color: orange;
-}
-
-header {
-    background-color: transparent;
-    display: flex;
-    justify-content: flex-end;
-    padding: 1.5rem;
-}
-
-.search {
-    background-color: transparent;
-    border: 2px solid #121280;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-    width: 400px;
-}
-
-#main {
-    align-self: center;
-}
-
-.search::placeholder {
-    color: #7378c5;
-}
-
-#search:hover {
-    outline: none;
-    background-color: #22254b;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 100px;
-    padding-top: -20px;
-}
-
-header h1 {
-    color: #ff8623;
-    text-align: center;
-}
-
-.highlight {
-    color: orange;
-}
-
-.search:focus {
-    outline: none;
-    background-color: #22254b;
-}
-
-.about {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 130px;
-    border-radius: 8px;
-}
-
-.header2 {
-    text-align: center;
-    align-self: center;
-    margin-left: 500px;
-}
-
-.back-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 41px;
-    border-radius: 8px;
-}
-
-.back-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.movie {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-}
-
-.movie img {
-    width: 100%;
-}
-
-.movie-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-}
-
-.movie-info h3 {
-    margin: 0;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.movie-info span.green {
-    color: rgb(39,189,39);
-}
-
-.movie-info span.orange {
-    color: orange;
-}
-
-.movie-info span.red {
-    color: rgb(189,42,42);
-}
-
-.overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.movie:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.overview h4 {
-    margin-top: 0;
-}
-
-.genres {
-    align-self: center;
-    margin-left: 15px;
-    color: #ff8623;
-}
-
-#other1:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#movie-match-btn3 {
-    position: fixed;
-    bottom: 220px;
-    right: 20px;
-    background-color: #7378c5;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-}
-
-#movie-match-btn3:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.about:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-.modal-content {
-    background-color: #7378c5;
-    margin: 15% auto;
-    padding: 20px;
-    width: 80%;
-    max-width: 450px;
-    text-align: center;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    border-radius: 8px;
-}
-
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 10px;
-}
-
-.modal-content {
-    text-align: center;
-}
-
-.close-button {
-    cursor: pointer;
-    position: relative;
-    top: -2px;
-    font-size: 25px;
-    color: #aaa;
-    font-weight: bold;
-}
-
-.close-button:hover,
-.close-button:focus {
-    color: red;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.progress-circle {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    background: conic-gradient(green 0%, green var(--progress, 0%), red var(--progress, 0%), red 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin: 20px auto;
-    transition: stroke-dashoffset 0.5s ease-out;
-}
-
-.progress-circle::after {
-    content: '';
-    width: 130px;
-    height: 130px;
-    background: white;
-    border-radius: 50%;
-    display: block;
-}
-
-#correct-answers {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 30px;
-    font-weight: bold;
-}
-
-#result-text {
-    text-align: center;
-    font-size: 20px;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-.favorites-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 219px;
-    border-radius: 8px;
-    padding-left: 10px;
-    padding-right: 10px;
-    box-sizing: border-box;
-}
-
-.favorites-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#favorite-btn {
-    background: transparent;
-    color: grey;
-    margin-left: 10px;
-    border-radius: 8px;
-    width: 40px;
-    box-shadow: none;
-    position: relative;
-    cursor: pointer;
-}
-
-#favorite-btn:hover {
-    background-color: #dcdcdc;
-}
-
-#button-search {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#button-search:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-#settings-btn {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#settings-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-#menu-btn {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-    font-size: 14px;
-}
-
-#menu-btn i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-#menu-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#chat-button {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#chat-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-
-#chat-button,
-#settings-btn,
-#movie-of-the-day-btn,
-#movie-match-btn,
-#movie-match-btn3,
-#movie-timeline-btn,
-#discussions-btn,
-#trivia-btn,
-#back-to-top-btn {
-    transition: transform 0.5s ease, opacity 0.5s ease;
-    transform: translateY(20px);
-    opacity: 0;
-    display: none;
-}
-
-@media (min-width: 768px) {
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #movie-match-btn3,
-    #trivia-btn,
-    #back-to-top-btn {
-        position: fixed;
-        right: 10px;
-        z-index: 1000;
-    }
-
-    #menu-btn {
-        display: block;
-    }
-}
-
-.mobile-bottom-bar {
-    display: none;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    background-color: #7378c5;
-    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
-    justify-content: space-around;
-    align-items: center;
-    z-index: 1000002;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-}
-
-.mobile-bottom-bar {
-    transition: transform 0.09s ease-in-out;
-}
-
-.hide-bar {
-    transform: translateY(100%);
-}
-
-.mobile-bottom-bar a {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    text-align: center;
-    color: white;
-    text-decoration: none;
-    padding: 3px 0;
-    width: 15%;
-}
-
-.mobile-bottom-bar a:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.mobile-bottom-bar i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-.mobile-bottom-bar span {
-    display: block;
-    font-size: 10px;
-    color: #ecf0f1;
-}
-
-#trivia-btn {
-    position: fixed;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #trivia-btn,
-    #menu-btn,
-    #back-to-top-btn {
-        display: none;
-    }
-}
-
-#trivia-label:hover {
-    color: #ff8623;
-}
-
-#trivia-label {
-    margin-top: 50px
-}
-
-.button-container {
-    display: flex;
-    justify-content: center;
-}
-
-#clear-search-btn {
-    display: block;
-    margin: 20px auto;
-    background-color: #7378c5;
-    color: black;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-left: 10px;
-    font: inherit;
-    margin-right: 20px;
-}
-
-#quiz-container {
-    background-color: rgba(255, 255, 255, 0.2);
-    padding: 20px;
-    border-radius: 10px;
-    max-width: calc(100% - 20px);
-    width: 600px;
-    margin: 10px auto;
-    box-sizing: border-box;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#quiz-form {
-    width: calc(100% - 20px);
-    margin: 10px auto;
-    box-sizing: border-box;
-    padding: 0 10px;
-}
-
-@media (max-width: 520px) {
-    #quiz-container, #quiz-form {
-        width: calc(100% - 20px);
-        margin: 10px auto;
-    }
-}
-
-.button {
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 20px;
-}
-
-#clear-search-btn:hover {
-    background-color: #ff8623;
-}
-
-.side-nav {
-    position: fixed;
-    left: -250px;
-    top: 0;
-    width: 250px;
-    height: 100%;
-    background-color: #373b69;
-    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
-    overflow-y: auto;
-    transition: left 0.39s;
-    z-index: 1000;
-}
-
-.side-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.side-nav ul li {
-    padding: 15px 20px;
-    border-radius: 8px;
-    text-align: left;
-}
-
-.side-nav ul li a {
-    color: white;
-    text-decoration: none;
-    display: block;
-    padding-left: 5px;
-}
-
-.side-nav ul li a:hover {
-    background-color: #ff8623;
-    border-radius: 8px;
-}
-
-.nav-toggle {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    cursor: pointer;
-    font-size: 1.5rem;
-    top: 5px;
-    left: 15px;
-    border-radius: 8px;
-    padding: 3.5px;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    display: flex;
-    position: fixed;
-    justify-content: center;
-    align-items: center;
-    padding-left: 4.25px;
-}
-
-.nav-toggle i {
-    line-height: inherit;
-}
-
-.nav-toggle:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#button-remove {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#button-remove:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-@media (max-width: 900px) {
-    #profileBtn {
-        display: none;
-    }
-}
-
-@media (max-width: 840px) {
-    #my-heading {
-        margin-left: 0;
-    }
-
-    .back-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: -180px;
-        border-radius: 8px;
-    }
-
-    .about {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 0;
-        border-radius: 8px;
-    }
-
-    .favorites-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 189px;
-        border-radius: 8px;
-        padding-left: 12px;
-        padding-right: 12px;
-        box-sizing: border-box;
-    }
-
-    #googleSignInBtn {
-        display: none;
-    }
-
-    header {
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    main {
-        margin-bottom: -40px;
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    #trivia-label {
-        margin-top: 60px;
-    }
-}
-
-#movie-match-btn2 {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/about.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/about.html
deleted file mode 100644
index 87048c73..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/about.html
+++ /dev/null
@@ -1,1286 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>About The MovieVerse - Your Ultimate Movie Guide</title>
-    <meta property="og:title" content="About The MovieVerse - Your Ultimate Movie Guide" />
-    <meta name="description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/about.html"/>
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#aboutHeader">About The MovieVerse</a></li>
-            <li><a href="#subheading1">Core Features</a></li>
-            <li><a href="#subheading2">Explore Our Other Apps</a></li>
-            <li><a href="#subheading">Our Vision</a></li>
-            <li><a href="#subheading3">Join The Journey</a></li>
-            <li><a href="#subheading4">Useful Links</a></li>
-            <li><a href="terms-of-service.html">Terms of Service</a></li>
-            <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-
-    <main id="main2" style="margin: 0 auto">
-        <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
-        <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
-        <div style="width: 100%">
-            <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
-        </div>
-
-        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
-        <h3 id="subheading1" style="cursor: pointer">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">
-            <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 specialized sections like Director's Spotlight and award-winning films.</li>
-            <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
-            <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Interactive Discussions and Trivia:</strong> Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.</li>
-            <li><i style="margin-right: 3px" class="fas fa-fire"></i> <strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.</li>
-            <li><i style="margin-right: 3px" class="fas fa-clock"></i> <strong>Movie Timeline:</strong> Select a period and explore a curated list of movies from that era, offering a unique way to experience the evolution of film over time.</li>
-            <li><i style="margin-right: 3px" class="fas fa-heart"></i> <strong>Movie Match/Recommendation:</strong> Find or get recommended a movie that matches your mood, genre, and time period, ensuring you always find the perfect movie to watch.</li>
-            <li><i style="margin-right: 3px" class="fas fa-info-circle"></i> <strong>Detailed Filmography Insights:</strong> Delve into the careers of your favorite <a id="githubLink1" href="director-details.html">directors</a>, <a id="githubLink1" href="actor-details.html">actors</a>, and <a id="githubLink1" href="company-details.html">companies</a> with dedicated pages detailing their filmography and impact on cinema.</li>
-            <li><i style="margin-right: 3px" class="fas fa-sign-in-alt"></i> <strong>Sign In/Sign Out:</strong> Sign in to your account to access your personalized movie recommendations, <a id="githubLink1" href="favorites.html">watch lists</a>, <a id="githubLink1" href="user-profile.html">profile</a>, and more.</li>
-            <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Watch Lists:</strong> Save movies to your watch lists and share them with your loved ones, ensuring you never miss out on a movie you want to watch. If you're signed in, your watch lists are <a id="githubLink1" href="favorites.html">accessible</a> across all your devices!</li>
-            <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Chat Functionality:</strong> Engage with fellow movie enthusiasts through our secure <a id="githubLink1" href="chat.html">chat</a> feature, where you can discuss and connect with like-minded MovieVerse individuals!</li>
-            <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Search Functionality:</strong> Use our extensive <a id="githubLink1" href="search.html">search</a> functionality to find movies, actors, directors, and TV series, ensuring you always find what you're looking for.</li>
-            <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
-            <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
-        </ul>
-
-        <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
-        <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
-
-        <ul style="align-content: center; color: white">
-            <li>
-                <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';" class="app-btn">The StickyNotes App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Embark on a culinary adventure with RecipeGenie, your go-to database for delightful recipes.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';" class="app-btn">The RecipeGenie Database</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Stay ahead of the weather with WeatherMate, your personal weather forecasting assistant.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';" class="app-btn">The WeatherMate App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Keep track of your tasks and boost productivity with the ToDo App, a straightforward task manager.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-ToDo-App/';" class="app-btn">The ToDo App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Plan and manage your events seamlessly with EventHorizon, your ultimate event organizer.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
-            </li>
-        </ul>
-
-        <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
-        <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
-        <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
-        <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
-        <br/>
-        <p style="color: white; text-align: center">Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of movies!</p>
-        <br/>
-        <p style="color: white; text-align: center">
-            <em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <strong><a style="color: #ff8623" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a></strong>.
-                <i style="margin-left: 3px" class="fab fa-github"></i>
-            </em>
-        </p>
-
-        <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
-        <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
-        <br/>
-        <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
-        <br/>
-        <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
-        <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
-        <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
-        <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
-        <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
-    </main>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
-        </a>
-    </footer>
-
-    <script>
-        document.getElementById('logo').addEventListener('click', function() {
-            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
-
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-
-        document.getElementById('logo').addEventListener('mouseover', function() {
-            this.style.cursor = 'pointer';
-            this.style.transform = 'scale(1.05)';
-            this.style.transition = '0.3s ease-in-out';
-        });
-
-        document.getElementById('logo').addEventListener('mouseout', function() {
-            this.style.transform = 'scale(1)';
-        });
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById("subheading1").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading2").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading2').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading3").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading3').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading4").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading4').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("aboutHeader").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('aboutHeader').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/actor-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/actor-details.html
deleted file mode 100644
index e96b40fe..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/actor-details.html
+++ /dev/null
@@ -1,808 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Actor Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html">
-    <meta property="og:title" content="Actor Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        #actor-details-container {
-            margin-top: 0;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #actor-details-container {
-                margin-top: 25px;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #actor-details-container {
-            margin-top: 25px;
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <main id="main" style="margin-left: 25px; height: 0"></main>
-
-    <div class="details-container" id="actor-details-container" style="margin-bottom: 70px;">
-        <!-- Left side for Actor Image -->
-        <div class="actor-left" style="overflow-y: hidden">
-            <h2 id="actor-name" class="actor-header"></h2>
-            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
-            <div style="height: 20px"></div>
-        </div>
-        <!-- Right side for Description and Info -->
-        <div class="actor-right" id="actor-description">
-            <!-- Actor details will be populated here -->
-        </div>
-    </div>
-
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script src="../js/actor-details.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('actor-image').addEventListener('click', function() {
-            const imageUrl = this.src.replace('w1280', 'original')
-            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/analytics.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/analytics.html
deleted file mode 100644
index 9b02e879..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/analytics.html
+++ /dev/null
@@ -1,910 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Database Analytics - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html">
-    <meta property="og:title" content="Database Analytics - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="https://movie-verse.com/MovieVerse-Frontend/css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("https://movie-verse.com/images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @keyframes fadeInUp {
-            0% {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: fadeInUp 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: fadeInUp 1s ease forwards 0.5s;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        @keyframes dropIn {
-            0% {
-                opacity: 0;
-                transform: translateY(-50px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: dropIn 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1s;
-        }
-        #local-time {
-            cursor: pointer;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1.5s;
-        }
-        #local-time p,
-        #local-time div {
-            opacity: 0;
-            animation: dropIn 1s ease forwards 2s;
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0" class="notranslate">
-            <h1 id="my-heading" style="margin-bottom: -10px">
-                The Mo<span class="highlight">vieV</span>erse
-            </h1>
-        </a>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="#chart1">Annual Releases</a></li>
-            <li><a href="#chart2">Genre Popularity</a></li>
-            <li><a href="#chart3">Certification Breakdown</a></li>
-            <li><a href="#chart4">Popularity Trends</a></li>
-            <li><a href="#chart5">Language Counts</a></li>
-            <li><a href="#chart6">Votes by Genre</a></li>
-            <li><a href="#chart7">Monthly Releases</a></li>
-            <li><a href="#chart8">Decadal Releases</a></li>
-            <li><a href="#chart9">Country Releases</a></li>
-            <li><a href="#chart11">Yearly Top Movies</a></li>
-            <li><a href="#chartVotesOverYears">Votes Over Time</a></li>
-            <li><a href="#chartHighlyRatedMovies">Top Movies Trends</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-        </ul>
-    </nav>
-    <div>
-        <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div class="chart-container" style="margin-bottom: 250px">
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title1" style="cursor: pointer">Number of Movies Released Each Year</h2>
-            <canvas id="chart1"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title2" style="cursor: pointer">Popularity of Genres</h2>
-            <canvas id="chart2"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title3" style="cursor: pointer">Movies Distribution by Certification</h2>
-            <canvas id="chart3"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title4" style="cursor: pointer">Average Movie Popularity Over Time</h2>
-            <canvas id="chart4"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title5" style="cursor: pointer">Movies Count by Original Language</h2>
-            <canvas id="chart5"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title6" style="cursor: pointer">Average Vote Count by Genre</h2>
-            <canvas id="chart6"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title7" style="cursor: pointer">Movie Releases by Month</h2>
-            <canvas id="chart7"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title8" style="cursor: pointer">Movie Releases by Decades</h2>
-            <canvas id="chart8"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title9" style="cursor: pointer">Movie Releases by Countries</h2>
-            <canvas id="chart9"></canvas>
-        </div>
-        <div class="chart-box" id="chart-title1">
-            <h2 class="chart-title" id="chart-title10" style="cursor: pointer">Top Rated Movies per Year</h2>
-            <canvas id="chart11"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title11" style="cursor: pointer">Total Movie Votes Over Years</h2>
-            <canvas id="chartVotesOverYears"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated Movies Over Years</h2>
-            <canvas id="chartHighlyRatedMovies"></canvas>
-        </div>
-    </div>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="ad-container2" style="display: block; text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script src="../js/analytics.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData1()}/3/search/multi?${getMovieNames1()}${getMovieCode1()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.error("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.error('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData1()}/3/person/${item.id}?${getMovieNames1()}${getMovieCode1()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.error('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.error('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        function getMovieVerseData1(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function getMovieNames1(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode1() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/api_fails.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/api_fails.html
deleted file mode 100644
index c7fa1c18..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/api_fails.html
+++ /dev/null
@@ -1,1026 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>We're Offline - The MovieVerse</title>
-    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html">
-    <meta property="og:title" content="We're Offline - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="We're Offline - The MovieVerse">
-    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="center-text" style="padding: 120px;">
-        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">MovieVerse is Offline</div>
-        <p>We're sorry, our service is currently unavailable. This could be due to a temporary issue with our servers or your internet connection. Please try again.</p>
-        <p>If you continue to experience issues, please contact our support team at <a id="link" href="support.html">our support page</a>.</p>
-        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
-    </div>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 500px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/article.hbs b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/article.hbs
deleted file mode 100644
index 644be6cd..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/article.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{article.title}}</title>
-</head>
-<body>
-  <header>
-    <h1>{{article.title}}</h1>
-    <p>Written by: {{article.author}}</p>
-  </header>
-  <article>
-    <p>{{article.content}}</p>
-  </article>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chat.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chat.html
deleted file mode 100644
index 4054ba67..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chat.html
+++ /dev/null
@@ -1,1023 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Chat - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Chat - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chat.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chat.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Chat - The MovieVerse">
-    <meta name="twitter:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .user-search-result {
-            background-color: #333;
-            margin: 10px auto;
-            padding: 10px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            color: white;
-            transition: background-color 0.3s ease;
-            flex-wrap: wrap;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-        }
-        .user-search-result img {
-            flex-shrink: 0;
-            margin-right: 10px;
-            border-radius: 8px;
-        }
-        .user-search-result > div {
-            flex: 1;
-            min-width: 120px;
-            word-break: break-word;
-        }
-        .tooltip {
-            position: absolute;
-            background-color: #333;
-            color: white;
-            padding: 5px 10px;
-            border-radius: 5px;
-            z-index: 100;
-            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-            white-space: nowrap;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        #main {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            min-height: 80vh;
-        }
-        #userListContainer {
-            flex-basis: 30%;
-            background-color: rgba(0, 0, 0, 0.7);
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-        }
-        #searchUserInput {
-            width: 100%;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #ff8623;
-            margin-bottom: 10px;
-            background-color: #333;
-            color: white;
-        }
-        @media (min-width: 768px) {
-            #searchUserInput {
-                min-width: 320px;
-            }
-        }
-        .user:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .user {
-            border-radius: 8px;
-            padding: 5px;
-            cursor: pointer;
-        }
-        .user-item {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-            background-color: #333;
-            color: white;
-        }
-        .user-item:hover {
-            background-color: #ff8623;
-        }
-        .user-avatar {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            margin-right: 10px;
-        }
-        .user-info {
-            flex-grow: 1;
-        }
-        .user-email {
-            font-weight: bold;
-        }
-        .user-bio {
-            color: #ccc;
-        }
-        #chatSection {
-            display: flex;
-            flex-direction: column;
-            flex-basis: 65%;
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-            min-height: 90vh;
-        }
-        #messages {
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 20px;
-            background: none;
-            display: flex;
-            flex-direction: column;
-            border-radius: 8px;
-        }
-        #chatInput {
-            padding: 10px;
-            border-top: 1px solid #ccc;
-        }
-        #userEmailDisplay {
-            background-color: #ff8623;
-            color: white;
-            border-radius: 10px;
-            padding: 10px;
-        }
-        .message {
-            margin: 5px 0;
-            padding: 10px;
-            border-radius: 8px;
-            max-width: 80%;
-            word-wrap: break-word;
-        }
-        .my-message {
-            align-self: flex-end;
-            background-color: #ff8623;
-            color: white;
-        }
-        .other-message {
-            align-self: flex-start;
-            background-color: #7378c5;
-            color: white;
-        }
-        #chatInput {
-            padding: 10px;
-            border-top: 1px solid #ccc;
-        }
-        #messageInput {
-            flex-grow: 1;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #ff8623;
-            background-color: #333;
-            color: white;
-            width: 100%;
-        }
-        #sendButton {
-            padding: 10px 20px;
-            border-radius: 5px;
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #sendButton:hover {
-            background-color: #7f4caf;
-        }
-        #main {
-            display: flex;
-            justify-content: space-between;
-            align-items: stretch;
-            min-height: 80vh;
-            gap: 20px;
-        }
-        #userListContainer {
-            flex: 1;
-            background-color: rgba(0, 0, 0, 0.7);
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-        }
-        #chatSection {
-            flex: 2;
-            display: flex;
-            flex-direction: column;
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-            padding: 20px;
-        }
-        @media (max-width: 900px) {
-            #main {
-                flex-direction: column;
-                align-items: center;
-                width: 100%;
-                margin-left: 0;
-            }
-            #userListContainer, #chatSection {
-                width: 90% !important;
-                margin: 0 auto;
-                max-width: 100% !important;
-                display: flex;
-                flex-direction: column;
-            }
-            #userList {
-                max-height: 300px;
-                overflow-y: auto;
-            }
-            #chatSection {
-                width: 100% !important;
-                flex-grow: 1;
-            }
-            #noUserSelected {
-                width: 90% !important;
-                flex-grow: 1;
-            }
-        }
-        .selected-user {
-            background-color: #ff8623;
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <main id="main" style="margin-bottom: 20px">
-        <div id="userListContainer">
-            <div id="searchContainer">
-                <input type="text" id="searchUserInput" placeholder="Search for a user" style="font: inherit" />
-            </div>
-            <div id="searchUserResults"></div>
-            <h3>Recent & Suggested Chats</h3>
-            <div id="userList"></div>
-        </div>
-        <div id="chatSection">
-            <div id="userEmailDisplay" style="padding: 10px;"></div>
-            <div id="messages"></div>
-            <div id="chatInput">
-                <input type="text" id="messageInput" placeholder="Type your message" style="font: inherit" />
-                <button id="sendButton">Send</button>
-            </div>
-        </div>
-        <div id="noUserSelected" style="flex-basis: 65%; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; color: white; display: flex; justify-content: center; align-items: center; min-height: 90vh;">
-            <p>Welcome to MovieVerse Chats! Select or find a user to begin chatting with your fellow movie enthusiasts!</p>
-        </div>
-    </main>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-        <p style="color: white; margin-left: 10px">Loading chats...</p>
-    </div>
-    <footer id="footer">
-        <p>© 2024 The MovieVerse. All rights reserved.</p>
-    </footer>
-    <script type="module" src="../js/chat.js"></script>
-    <script src="../js/chat-auxiliary.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chatbot.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chatbot.html
deleted file mode 100644
index c3f9dc5c..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/chatbot.html
+++ /dev/null
@@ -1,846 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Chatbot - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html">
-    <meta property="og:title" content="Chatbot - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Chatbot - The MovieVerse">
-    <meta name="twitter:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="manifest" href="../../manifest.json">
-    <script type="importmap">
-        {
-          "imports": {
-            "@google/generative-ai": "https://esm.run/@google/generative-ai"
-          }
-        }
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        #header {
-            margin-top: 26px;
-            padding-left: 25px;
-        }
-        #form {
-            margin-top: -5px;
-            margin-right: 55px;
-        }
-        @media (max-width: 800px){
-            #header {
-                margin-top: 10px;
-            }
-            #form {
-                margin-top: -15px;
-                margin-right: 0;
-            }
-        }
-        @media (min-width: 900px) {
-            #header {
-                margin-top: 26px;
-                padding-left: 25px;
-            }
-            #form {
-                margin-top: 2px;
-            }
-            #my-heading {
-                margin-top: 17px !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #my-heading {
-                margin-top: 9px !important;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        #homepage-header {
-            margin-top: -10px;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-            #homepage-header {
-                margin-top: 10px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="bot-header">
-        <h2 id="search-title">The <span class="highlight1">MovieVerse</span> Assistant</h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-        <h4 id="alt-title" style="font-weight: normal; font-size: 15px; color: #ff8623">Dive deep into the movie world with our expert assistant!</h4>
-    </div>
-    <main id="main" style="padding: 0; margin: 0 auto; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 400px">
-        <div id="chatbotContainer">
-            <div id="chatbotHeader">The MovieVerse Assistant</div>
-            <div id="chatbotBody"></div>
-            <input id="chatbotInput" type="text" placeholder="Ask me about anything..." title="Type your message here"/>
-            <button id="sendButton" title="Send this message">Send</button>
-        </div>
-    </main>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/chatbot.js" type="module"></script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-        <p style="color: white; margin-left: 10px">Loading response...</p>
-    </div>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; color: white; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-            });
-
-            function displaySearchResults(results) {
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-                    details.style.textAlign = 'left';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-    </script>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/christopher-nolan.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/christopher-nolan.html
deleted file mode 100644
index 2874ec08..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/christopher-nolan.html
+++ /dev/null
@@ -1,497 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Director Details - Explore More About Christopher Nolan</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/christopher-nolan.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html">
-    <meta property="og:title" content="Director Details - Christopher Nolan">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Director Details - Christopher Nolan">
-    <meta name="twitter:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" style="margin-left: 25px">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 25px; margin-bottom: -40px">
-
-    </main>
-
-    <div class="details-container" id="director-details-container">
-        <!-- Left side for Director Image -->
-        <div class="director-left" style="overflow: hidden">
-            <h2 id="director-name" class="director-header"></h2>
-            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; overflow: hidden"/>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="director-right" id="director-description">
-            <!-- Director details will be populated here -->
-        </div>
-    </div>
-
-    <script src="../js/christopher-nolan.js"></script>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-
-<script>
-    function getMovieVerseData(input) {
-        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-    }
-
-    async function showMovieOfTheDay() {
-        const year = new Date().getFullYear();
-        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-        try {
-            const response = await fetch(url);
-            const data = await response.json();
-            const movies = data.results;
-
-            if (movies.length > 0) {
-                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                localStorage.setItem('selectedMovieId', randomMovie.id);
-                window.location.href = 'movie-details.html';
-            }
-            else {
-                fallbackMovieSelection();
-            }
-        }
-        catch (error) {
-            console.log('Error fetching movie:', error);
-            fallbackMovieSelection();
-        }
-    }
-
-    const movieCode = {
-        part1: 'YzVhMjBjODY=',
-        part2: 'MWFjZjdiYjg=',
-        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-    };
-
-    function getMovieCode() {
-        return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-    }
-
-    function generateMovieNames(input) {
-        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-    }
-
-    function fallbackMovieSelection() {
-        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-        localStorage.setItem('selectedMovieId', randomFallbackMovie);
-        window.location.href = 'movie-details.html';
-    }
-
-    document.getElementById('settings-btn').addEventListener('click', () => {
-        window.location.href = 'settings.html';
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-        applySettings();
-
-        function applySettings() {
-            const savedBg = localStorage.getItem('backgroundImage');
-            const savedTextColor = localStorage.getItem('textColor');
-            const savedFontSize = localStorage.getItem('fontSize');
-
-            if (savedBg) {
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-            }
-            if (savedTextColor) {
-                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                    element.style.color = savedTextColor;
-                });
-            }
-            if (savedFontSize) {
-                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                document.body.style.fontSize = size;
-            }
-        }
-    });
-</script>
-
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/company-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/company-details.html
deleted file mode 100644
index f0b6c77c..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/company-details.html
+++ /dev/null
@@ -1,795 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Company Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/company-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Company Details - The MovieVerse" />
-    <meta name="description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Company Details - The MovieVerse">
-    <meta name="twitter:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @media (min-width: 800px) {
-            footer {
-                margin-top: 500px;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: 0 !important;
-            }
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <main id="main" style="margin-left: 25px; height: 0"></main>
-    <div class="details-container" id="company-details-container" style="margin-bottom: 650px">
-        <div class="company-left">
-            <div class="title-logo-container">
-                <h2 id="company-name" class="company-header"></h2>
-                <img id="company-logo" alt="Loading Company Details..." style="z-index: 1000000000; width: 25vw; background-color: #ffffff; border-radius: 8px;"/>
-            </div>
-        </div>
-        <div class="company-right">
-            <p id="company-description" class="company-description"></p>
-            <p><strong>Headquarters:</strong> <span id="company-headquarters"></span></p>
-            <p><strong>Country:</strong> <span id="company-country"></span></p>
-            <p><strong>Website:</strong> <a id="company-website" href="" target="_blank"></a></p>
-            <p style="text-align: center"><strong>Produced Movies:</strong></p>
-            <div style="text-align: center" id="company-movies-list" class="movies-list"></div>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 250px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/company-details.js"></script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('company-logo').addEventListener('click', function() {
-            const imageUrl = this.src.replace('w500', 'original');
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/create-account.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/create-account.html
deleted file mode 100644
index ad374615..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/create-account.html
+++ /dev/null
@@ -1,1052 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Create Account - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html">
-    <meta property="og:title" content="Create Account - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Create Account - The MovieVerse">
-    <meta name="twitter:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="theme-color" content="#7378c5">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .account-creation-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .account-creation-form-container input[type="email"],
-        .account-creation-form-container input[type="password"],
-        .account-creation-form-container input[type="text"],
-        .account-creation-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .account-creation-form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-        .account-creation-form-container button:hover {
-            background-color: #22254b;
-            color: white;
-        }
-        .account-creation-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .account-creation-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-        #back-to-sign-in {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #back-to-sign-in:hover {
-            background-color: #22254b;
-            color: white;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0;
-            }
-        }
-        #local-time {
-            transform: translateX(12%);
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="account-creation-form-container" id="account-creation-form-container" style="margin-bottom: 300px">
-        <form id="createAccountForm">
-            <h2>Create Account</h2>
-            <p style="color: black">Create an account to personalize your movie recommendations, save  <a style="text-decoration: underline" id="githubLink1" href="favorites.html">favorites</a>, and enhance your movie discovery experience.</p>
-            <input type="email" id="newEmail" placeholder="Email" required>
-            <input type="password" id="newPassword" placeholder="Password" required>
-            <input type="password" id="confirmPassword" placeholder="Re-type Password" required>
-            <label style="margin-top: 10px; margin-bottom: 10px">
-                <input type="checkbox" id="togglePassword"> Show Password
-            </label>
-            <button type="submit">Create Account</button>
-            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
-        </form>
-    </div>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('newPassword');
-            const confirmPasswordInput = document.getElementById('confirmPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-                confirmPasswordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-                confirmPasswordInput.type = 'password';
-            }
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script src="../js/create-account.js" type="module"></script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-    </script>
-    <footer style="margin-top: 650px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/director-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/director-details.html
deleted file mode 100644
index 55acbdc4..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/director-details.html
+++ /dev/null
@@ -1,835 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Director Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/director-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html">
-    <meta property="og:title" content="Director Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Director Details - The MovieVerse">
-    <meta name="twitter:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        header {
-            margin-top: -5px;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="details-container" id="director-details-container" style="margin-top: -50px; margin-bottom: 60px">
-        <!-- Left side for Director Image -->
-        <div class="director-left" style="overflow-y: hidden">
-            <h2 id="director-name" class="director-header"></h2>
-            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
-            <div style="height: 20px"></div>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="director-right" id="director-description">
-            <!-- Director details will be populated here -->
-        </div>
-    </div>
-
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/director-details.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-
-<script>
-    function getMovieVerseData(input) {
-        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-    }
-
-    async function showMovieOfTheDay() {
-        const year = new Date().getFullYear();
-        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-        try {
-            const response = await fetch(url);
-            const data = await response.json();
-            const movies = data.results;
-
-            if (movies.length > 0) {
-                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                localStorage.setItem('selectedMovieId', randomMovie.id);
-                window.location.href = 'movie-details.html';
-            }
-            else {
-                fallbackMovieSelection();
-            }
-        }
-        catch (error) {
-            console.log('Error fetching movie:', error);
-            fallbackMovieSelection();
-        }
-    }
-
-    const movieCode1 = {
-        part1: 'YzVhMjBjODY=',
-        part2: 'MWFjZjdiYjg=',
-        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-    };
-
-    function getMovieCode() {
-        return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-    }
-
-    function generateMovieNames(input) {
-        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-    }
-
-    function fallbackMovieSelection() {
-        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-        localStorage.setItem('selectedMovieId', randomFallbackMovie);
-        window.location.href = 'movie-details.html';
-    }
-
-    document.getElementById('settings-btn').addEventListener('click', () => {
-        window.location.href = 'settings.html';
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-        applySettings();
-
-        function applySettings() {
-            const savedBg = localStorage.getItem('backgroundImage');
-            const savedTextColor = localStorage.getItem('textColor');
-            const savedFontSize = localStorage.getItem('fontSize');
-
-            if (savedBg) {
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-            }
-            if (savedTextColor) {
-                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                    element.style.color = savedTextColor;
-                });
-            }
-            if (savedFontSize) {
-                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                document.body.style.fontSize = size;
-            }
-        }
-    });
-
-    document.getElementById('director-image').addEventListener('click', function() {
-        const imageUrl = this.src.replace('w1280', 'original');
-        const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-        document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-        document.getElementById('image-modal').addEventListener('click', function(event) {
-            if (event.target === this) {
-                this.remove();
-            }
-        });
-    });
-</script>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/favorites.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/favorites.html
deleted file mode 100644
index a679ec41..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/favorites.html
+++ /dev/null
@@ -1,1102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Favorites & Watchlists - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/movie-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Favorites & Watchlists - The MovieVerse" />
-    <meta name="description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <script src="../js/settings.js"></script>
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Favorites & Watchlists - The MovieVerse">
-    <meta name="twitter:description" content="Manage your favorite movies and watch lists on The MovieVerse. Keep track of movies you love and organize your watch lists for future viewing.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <script src="../js/favorites.js" type="module"></script>
-    <link rel="manifest" href="../../manifest.json">
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .watchlist-controls {
-            position: absolute;
-            top: 10px;
-            display: flex;
-            align-items: start;
-            gap: 5px;
-        }
-        .watchlist-controls button {
-            background: none;
-            border: none;
-            color: #ff8623;
-            cursor: pointer;
-            height: 20px;
-            width: 20px;
-            margin-right: 8px;
-            font-size: 18px;
-        }
-        #create-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #edit-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #delete-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        .watchlist.pinned .watchlist-controls #pin-btn {
-            color: #7378c5;
-        }
-        .watchlist-controls button:hover {
-            color: #7378c5;
-        }
-        .watchlist-controls button:first-child {
-            order: -1;
-        }
-        .watchlist {
-            position: relative;
-            padding-top: 30px;
-        }
-        .watchlist.pinned {
-            border: 2px solid yellow;
-        }
-        .watchlist-buttons-container {
-            display: flex;
-            justify-content: center;
-            gap: 10px;
-            margin-left: 0;
-            margin-top: 35px;
-            margin-bottom: 15px;
-        }
-        @media (max-width: 1200px) {
-            #local-time {
-                display: none;
-            }
-        }
-        #button {
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        #how-to-use {
-            text-align: center;
-            margin-top: 20px;
-            margin-bottom: 60px;
-        }
-        #how-to-use-btn {
-            background-color: #7378c5;
-            color: white;
-            border-radius: 8px;
-            padding: 10px 20px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font: inherit;
-            cursor: pointer;
-            border: none;
-        }
-        #how-to-use-btn:hover {
-            background-color: #ff8623;
-        }
-        #how-to-use-section {
-            max-width: 400px;
-            margin: 20px auto;
-            padding: 15px;
-            background-color: #7378c5;
-            color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            display: none;
-            transition: height 0.5s ease-in-out;
-            margin-bottom: 240px;
-        }
-        #how-to-use-section:hover {
-            background-color: #6e73bd;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #githubLink3 {
-            color: white !important;
-        }
-        #githubLink3:hover {
-            color: #ff8623 !important;
-            transition: 0.1s ease-in;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -30px; padding-top: 19px">
-        <div id="header-title">
-            <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
-                <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                    The Mo<span class="highlight" id="highlight">vieV</span>erse
-                </a>
-            </h1>
-        </div>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 5px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul id="watchlist-links" style="overflow-y: auto">
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-
-    <div class="watchlist-buttons-container">
-        <button id="create-watchlist-btn">Create Watch Lists</button>
-        <button id="edit-watchlist-btn">Edit Watch Lists</button>
-        <button id="delete-watchlist-btn">Delete Watch Lists</button>
-    </div>
-
-    <div id="create-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('create-watchlist-modal')">&times;</span>
-            <h2>Create a Watch List</h2>
-            <form id="create-watchlist-form">
-                <label>Name:</label>
-                <input type="text" id="new-watchlist-name" placeholder="Watchlist's Name" style="font: inherit" required>
-                <div style="height: 20px"></div>
-                <label>Description:</label>
-                <textarea placeholder="Watchlist Description" id="new-watchlist-description" style="font: inherit"></textarea>
-                <button type="submit" id="button" style="display: block; margin-left: auto; color: white; margin-right: auto;">Create</button>
-            </form>
-        </div>
-    </div>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <div id="edit-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('edit-watchlist-modal')">&times;</span>
-            <h2>Edit a Watch List</h2>
-            <form id="edit-watchlist-form">
-                <!-- Dynamically populate this form based on user selection -->
-            </form>
-        </div>
-    </div>
-
-    <div id="delete-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('delete-watchlist-modal')">&times;</span>
-            <h2>Delete Watch Lists</h2>
-            <label>Select watch lists to delete:</label>
-            <form id="delete-watchlist-form">
-                <!-- Dynamically populate this form based on user selection -->
-            </form>
-        </div>
-    </div>
-
-    <div id="watchlists-display-section">
-        <!-- Dynamically populated watch lists will go here -->
-    </div>
-
-    <main id="favorites-main" style="margin-top: 75px; text-align: center"></main>
-    <main id="favorites-main-tv" style="margin-top: 75px; text-align: center"></main>
-
-    <div id="how-to-use">
-        <button id="how-to-use-btn">How to Use</button>
-    </div>
-
-    <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
-        <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
-        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
-        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
-        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
-        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
-        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
-        <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists! 🍿🎬</p>
-    </div>
-
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink3" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" title="Go to top" style="bottom: 90px; right: 10px; z-index: 10012" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">Back to Top</button>
-    <script src="../js/movie-details.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script type="module">
-        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
-        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
-
-        let initialMoviesSelection = [];
-        let initialTVSeriesSelection = [];
-
-        function translateFBC(value) {
-            return atob(value);
-        }
-
-        function getFBConfig1() {
-            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
-            return translateFBC(fbConfig1);
-        }
-
-        function getFBConfig2() {
-            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
-            return translateFBC(fbConfig2);
-        }
-
-        function getFBConfig3() {
-            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
-            return translateFBC(fbConfig3);
-        }
-
-        function getFBConfig4() {
-            const fbConfig4 = "ODAyOTQzNzE4ODcx";
-            return translateFBC(fbConfig4);
-        }
-
-        function getFBConfig5() {
-            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
-            return translateFBC(fbConfig5);
-        }
-
-        const firebaseConfig = {
-            apiKey: getFBConfig1(),
-            authDomain: getFBConfig2(),
-            projectId: "movieverse-app",
-            storageBucket: getFBConfig3(),
-            messagingSenderId: getFBConfig4(),
-            appId: getFBConfig5()
-        };
-
-        const app = initializeApp(firebaseConfig);
-        const db = getFirestore(app);
-
-        async function loadNavWatchlistLinks() {
-            const navList = document.getElementById('watchlist-links');
-            const firstStaticItem = navList.querySelector('li');
-
-            try {
-                showSpinner();
-
-                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                let watchlists = [];
-
-                if (currentUserEmail) {
-                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
-                    const querySnapshot = await getDocs(q);
-                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
-                }
-                else {
-                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
-                }
-
-                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
-                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
-
-                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
-
-                let counter = 1;
-
-                watchlists.forEach(watchlist => {
-                    const listItem = document.createElement('li');
-                    listItem.className = 'dynamic';
-                    const link = document.createElement('a');
-                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
-
-                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
-                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
-                        counter++;
-                    }
-                    else {
-                        link.textContent = watchlist.name;
-                    }
-
-                    listItem.appendChild(link);
-                    navList.insertBefore(listItem, firstStaticItem);
-                });
-
-                hideSpinner();
-                assignIdsToWatchlists();
-            }
-            catch (error) {
-                console.error('Error loading watchlists for navigation:', error);
-                hideSpinner();
-            }
-        }
-
-        function assignIdsToWatchlists() {
-            document.querySelectorAll('.watchlist').forEach(watchlist => {
-                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
-                if (!watchlist.id) {
-                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
-                }
-            });
-        }
-
-        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
-    </script>
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/feedback.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/feedback.html
deleted file mode 100644
index 41e43187..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/feedback.html
+++ /dev/null
@@ -1,1107 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Feedback - The MovieVerse</title>
-    <meta name="description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them." />
-    <meta property="og:title" content="Feedback - The MovieVerse">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Feedback - The MovieVerse">
-    <meta name="twitter:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .form-container h1 {
-            color: #ff8623;
-        }
-        .form-container input,
-        .form-container textarea,
-        .form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .form-container button[type="submit"]:hover {
-            background-color: #ff8623;
-        }
-        .form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        #supportBtn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #supportBtn:hover {
-            background-color: #ff8623;
-        }
-        @media (min-width: 900px) {
-            #my-heading {
-                margin-top: 15px !important;
-            }
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="form-container">
-        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Feedback</div>
-        <p style="color: black">Noticed a bug? Have a suggestion? Wrong movie information? Or just want to say hi? We'd love to hear from you!</p>
-        <form action="https://formspree.io/f/xqkrbdqd" method="POST">
-            <input type="text" id="name" name="name" placeholder="Your Name" required>
-            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
-            <textarea id="message" name="message" placeholder="Your Feedback" required></textarea>
-            <button type="submit">Send Feedback</button>
-            <p style="color: black">Need immediate assistance? Submit a support request using the link below and we'll get back to you as soon as possible.</p>
-        </form>
-        <button id="supportBtn" onclick="window.location.href='support.html'">Request Support</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 200px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/inception.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/inception.html
deleted file mode 100644
index 897d13a4..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/inception.html
+++ /dev/null
@@ -1,521 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Details - Explore Inception by Christopher Nolan</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/inception.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/inception.html">
-    <meta property="og:title" content="Movie Details - Explore Inception by Christopher Nolan">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/inception.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/inception.jpg"/>
-    <meta property="og:image:alt" content="Inception Movie Poster">
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Details - Explore Inception by Christopher Nolan">
-    <meta name="twitter:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px">
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 35px; margin-top: 20px">
-
-    </main>
-
-    <div class="details-container" id="movie-details-container">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw"/>
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px"><strong>0.0/5.0</strong></span>
-        </div>
-
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-            <div id="comments-section">
-                <h3>Community Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Toggle Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This Movie</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname" required>
-                            <textarea id="user-comment" placeholder="Your comment" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your ideas!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </div>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script src="../js/inception.js"></script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('movie-image').addEventListener('click', function() {
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-
-    <script src="../js/comments.js" type="module"></script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/leonardo-dicaprio.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/leonardo-dicaprio.html
deleted file mode 100644
index 18a4d369..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/leonardo-dicaprio.html
+++ /dev/null
@@ -1,470 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Actor Details - Leonardo DiCaprio</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta name="description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html">
-    <meta property="og:title" content="Actor Details - Leonardo DiCaprio">
-    <meta property="og:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Actor Details - Leonardo DiCaprio">
-    <meta name="twitter:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <script src="../js/leonardo-dicarprio.js" defer></script>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        body {
-            background-image: url("https://movie-verse.com/images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-
-            <div id="search-results" class="search-results"></div>
-
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" style="margin-left: 25px">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 25px"></main>
-
-    <div class="details-container" id="actor-details-container">
-        <!-- Left side for Actor Image -->
-        <div class="actor-left" style="overflow: hidden">
-            <h2 id="actor-name" class="actor-header"></h2>
-            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw"/>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="actor-right" id="actor-description">
-            <!-- Actor details will be populated here -->
-        </div>
-    </div>
-
-    <script src="../js/leonardo-dicarprio.js"></script>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('actor-image').addEventListener('click', function() {
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-details.html
deleted file mode 100644
index bfc4fb00..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-details.html
+++ /dev/null
@@ -1,907 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/movie-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html">
-    <meta property="og:title" content="Movie Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Details - The MovieVerse">
-    <meta name="twitter:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        #favorite-btn:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        .favorited:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #movie-details-container {
-                margin-top: -50px;
-            }
-        }
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #rating-header {
-            color: #ffeb3b;
-        }
-        #rating-header:hover {
-            color: #ff8623;
-            transition: 0.2s ease-in;
-        }
-        #movie-details-container {
-            margin-top: 39px;
-        }
-        .movie-left {
-            margin-top: -10px;
-        }
-        @media (max-width: 767px) {
-            #movie-details-container {
-                margin-top: 0;
-            }
-            #form1 {
-                margin-bottom: 39px;
-            }
-            .movie-left {
-                margin-top: -40px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" >
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none; height: 0">
-        <h2 id="search-title"></h2>
-    </div>
-    <main id="main" style="margin-left: 35px; height: 0"></main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
-            <div id="comments-section">
-                <h3>Movie Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Toggle Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal" style="z-index: 100005">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This Movie</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
-                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right" style="position: relative; overflow: hidden">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: -20px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/movie-details.js"></script>
-    <script src="../js/add-to-favorites.js" type="module"></script>
-    <script type="module">
-        import { toggleFavorite, checkAndUpdateFavoriteButton } from '../js/add-to-favorites.js';
-
-        document.addEventListener('DOMContentLoaded', () => {
-            const favoriteBtn = document.getElementById('favorite-btn');
-            if (favoriteBtn) {
-                favoriteBtn.addEventListener('click', toggleFavorite);
-            }
-        });
-
-        checkAndUpdateFavoriteButton();
-    </script>
-    <script type="module">
-        import { loadUserRatings, updateAverageMovieRating } from '../js/ratings-module.js';
-
-        document.addEventListener('DOMContentLoaded', async () => {
-            const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-            const savedRatings = await loadUserRatings(currentUserEmail);
-            const movieId = localStorage.getItem('selectedMovieId');
-            const movieRating = savedRatings[movieId] || 0;
-            setStarRating(movieRating);
-        });
-
-        function setStarRating(rating) {
-            const stars = document.querySelectorAll('.rating .star');
-            stars.forEach(star => {
-                star.style.color = star.dataset.value > rating ? 'white' : 'gold';
-            });
-            document.getElementById('rating-value').textContent = `${rating}.0/5.0`;
-        }
-
-        let isHovering = false;
-
-        const stars = document.querySelectorAll('.rating .star');
-        stars.forEach(star => {
-            star.addEventListener('mouseover', (e) => {
-                isHovering = true;
-                setStarRating(e.target.dataset.value);
-            });
-
-            star.addEventListener('mouseout', () => {
-                isHovering = false;
-                setTimeout(() => {
-                    if (!isHovering) {
-                        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                        loadUserRatings(currentUserEmail).then(savedRatings => {
-                            const movieId = localStorage.getItem('selectedMovieId');
-                            const movieRating = savedRatings[movieId] || 0;
-                            setStarRating(movieRating);
-                        });
-                    }
-                }, 10);
-            });
-
-            star.addEventListener('click', async (e) => {
-                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                const movieId = localStorage.getItem('selectedMovieId');
-                const rating = e.target.dataset.value;
-                await updateAverageMovieRating(currentUserEmail, movieId, rating);
-                window.location.reload();
-            });
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <script>
-        document.getElementById('movie-image').addEventListener('click', function() {
-            let imageUrl = this.src.replace('w780', 'original');
-            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-    <script src="../js/comments.js" type="module"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-match.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-match.html
deleted file mode 100644
index 6d4e0045..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-match.html
+++ /dev/null
@@ -1,854 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Match - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html">
-    <meta property="og:title" content="Movie Match - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Match - The MovieVerse">
-    <meta name="twitter:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #search {
-            margin-top: -1px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <main id="movie-match-main" style="margin-bottom: 45vh">
-        <div class="movie-match-container">
-            <h2 id="search-title1">Find Your Movie Match</h2>
-            <form id="movie-match-form">
-                <label for="mood">Select Your Mood:</label>
-                <select id="mood">
-                    <option value="happy">Happy</option>
-                    <option value="sad">Sad</option>
-                    <option value="angry">Scary</option>
-                    <option value="adventurous">Adventurous</option>
-                    <option value="romantic">Romantic</option>
-                    <option value="thoughtful">Thoughtful</option>
-                </select>
-                <label for="genre">Preferred Genre:</label>
-                <select id="genre">
-                    <option value="action">Action</option>
-                    <option value="comedy">Comedy</option>
-                    <option value="drama">Drama</option>
-                    <option value="sci-fi">Sci-Fi</option>
-                    <option value="romance">Romance</option>
-                </select>
-                <label for="period">Time Period:</label>
-                <select id="period">
-                    <option value="2020s">2020s</option>
-                    <option value="2010s">2010s</option>
-                    <option value="2000s">2000s</option>
-                    <option value="90s">90s</option>
-                    <option value="80s">80s</option>
-                </select>
-                <input type="submit" value="Get Matched Movie">
-            </form>
-        </div>
-    </main>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script src="../js/movie-match.js"></script>
-    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.error("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.error('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.error('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.error('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.error('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script>
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <footer style="margin-top: 0">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-timeline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-timeline.html
deleted file mode 100644
index c59d916d..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movie-timeline.html
+++ /dev/null
@@ -1,806 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Timeline - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/actor-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html">
-    <meta property="og:title" content="Movie Timeline - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Timeline - The MovieVerse">
-    <meta name="twitter:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #search {
-            margin-top: -1px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        #footer {
-            margin-top: 700px
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #footer {
-                margin-top: 20px;
-            }
-        }
-    </style>
-
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .load-more-container {
-            width: 100%;
-            text-align: center;
-            margin-top: 20px;
-        }
-        .load-more-container button {
-            margin: 10px auto;
-            background-color: #7378c5;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font: inherit;
-            display: block;
-            transition: background-color 0.3s ease;
-        }
-        .load-more-container button:hover {
-            background-color: #ff8623;
-        }
-        #ad-container2 {
-            display: none;
-        }
-        @media (max-width: 768px) {
-            #ad-container2 {
-                display: block;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -20px; margin-top: -5px" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="timeline-container" style="margin-bottom: 300px">
-        <div class="center-container">
-            <div style="font-weight: bold; font-size: 27px" id="select-text">Select a Period</div>
-            <div class="year-input-container">
-                <input type="number" id="start-year" class="year-input" title="Enter any year from 1900 until now" placeholder="Start Year" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
-                <input type="number" id="end-year" class="year-input" placeholder="End Year" title="Enter any year from 1900 until now" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
-                <button id="load-movies" onclick="updateMovies()" title="Get Movies in the Chosen Period!">Get Movies in This Period</button>
-            </div>
-            <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
-        </div>
-        <div class="center-container1" id="center-container1">
-            <main id="results" style="scroll-behavior: smooth">
-                <!-- Movies will be dynamically loaded here -->
-            </main>
-        </div>
-    </div>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 255px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 220px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 185px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 150px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 115px; z-index: 10012; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 10012">Back To Top</button>
-
-    <script src="../js/movie-timeline.js"></script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" id="back-top">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('back-top').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-    </script>
-
-    <footer id="footer">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-</body>
-
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movies-list.hbs b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movies-list.hbs
deleted file mode 100644
index 8bdfc1c8..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/movies-list.hbs
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Movies List</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-    }
-    .movie {
-      margin-bottom: 20px;
-    }
-    .movie-title {
-      font-weight: bold;
-    }
-    .movie-year {
-      font-style: italic;
-    }
-    .movie-description {
-      margin-top: 5px;
-    }
-  </style>
-</head>
-<body>
-  <h1>Movies List</h1>
-  {{#each movies}}
-    <div class="movie">
-      <div class="movie-title">{{this.title}}</div>
-      <div class="movie-year">Released in: {{this.year}}</div>
-      <div class="movie-description">{{this.description}}</div>
-    </div>
-  {{/each}}
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/notifications.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/notifications.html
deleted file mode 100644
index 5aeeaee8..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/notifications.html
+++ /dev/null
@@ -1,1329 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Notifications - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Notifications - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations.">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html" />
-    <meta property="og:site_name" content="Notifications - The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Notifications - The MovieVerse">
-    <meta name="twitter:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations." />
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0 !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        main {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 20px;
-            padding: 20px;
-        }
-        section {
-            flex: 1 1 calc(33% - 40px);
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 100%;
-        }
-        @media (max-width: 1200px) {
-            section {
-                flex: 1 1 calc(50% - 40px);
-            }
-        }
-        @media (max-width: 768px) {
-            main {
-                flex-direction: column;
-            }
-            section {
-                flex-basis: 100%;
-            }
-        }
-        ul {
-            width: 100%;
-            padding: 0;
-            margin: 0;
-            list-style-type: none;
-        }
-        li {
-            width: 100%;
-            margin-top: 10px;
-            padding: 10px;
-            background-color: #ecf0f1;
-            border-left: 5px solid #2980b9;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        h2 {
-            margin-bottom: 10px;
-        }
-        li:hover {
-            background-color: #e1e3e4;
-            cursor: pointer;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #movie-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #actor-link {
-            color: black;
-        }
-        #director-link {
-            color: black;
-        }
-        #actor-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #director-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: 0 !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li style="background: none; border: none; box-shadow: none"><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#newFeatures">New Features</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#newReleases">New Releases</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#tipsTricks">Tips & Tricks</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#popularActors">Popular Actors</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#popularDirectors">Popular Directors</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="sign-in.html">Sign In</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="user-profile.html">Profile</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="feedback.html">Submit Feedback</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main>
-        <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
-            <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
-            <ul>
-                <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Improved Chatbot:</strong> Get personalized movie recommendations and insightful answers to your questions with our smarter chatbot.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Chat Feature:</strong> Join the conversation! Chat with fellow film fans in real-time to share your passion and discover new favorites.</li>
-                <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>Improved Recommendations:</strong>  Unlock a world of movies tailored just for you. Our enhanced engine suggests films based on your unique tastes and viewing habits.</li>
-                <li><i style="margin-right: 3px" class="fas fa-users"></i> <strong>User Profile Search:</strong>  Connect with your friends and discover their movie tastes. Search for user profiles and see what they're watching.</li>
-                <li><i style="margin-right: 3px" class="fas fa-user-plus"></i> <strong>Follow Other Users:</strong> Never miss a beat! Follow your friends to stay up-to-date on their latest movie discoveries and recommendations.</li>
-                <li><i style="margin-right: 3px" class="fas fa-share-alt"></i> <strong>Share Watch Lists:</strong> Spread the cinematic love! Create and share custom watch lists with friends and family, showcasing your curated collection of must-see films.</li>
-            </ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
-            <h3>Since Your Last Visit</h3>
-            <ul id="releasesSinceLastVisit"></ul>
-            <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
-            <ul id="releasesThisMonth"></ul>
-            <h3 style="margin-top: 35px">Since the Beginning of This Year</h3>
-            <ul id="releasesThisYear"></ul>
-            <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
-            <p style="color: black; margin-top: 0"> You can always view more recommended movies in your recommended list in <a id="githubLink1" href="../../index.html#recommendedDIV">your recommended movies section</a>.</p>
-            <ul id="recommendedReleases"></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
-            <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
-            <ul>
-                <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Engaging with the Community:</strong> Dive into vibrant discussions, share your insights, and connect with other film enthusiasts.</li>
-                <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Exploring Indie Films:</strong>  Unearth hidden cinematic treasures and broaden your horizons with our curated selection of independent films.</li>
-                <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>Rating Movies:</strong> Your voice matters! Share your opinions by rating movies and TV shows, helping us refine our recommendations for you and others.</li>
-                <li><i style="margin-right: 3px" class="fas fa-robot"></i> <strong>Chatting with the Chatbot:</strong> Need a movie suggestion or want to test your film trivia knowledge? Our friendly chatbot is always ready to entertain and inform.</li>
-                <li><i style="margin-right: 3px" class="fas fa-cloud"></i> <strong>Cloud Syncing:</strong> Your movie preferences follow you wherever you go. Enjoy seamless access to your watchlists and favorites across all your devices.</li>
-            </ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
-            <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
-            <ul></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
-            <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
-            <ul></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-    </main>
-    <script src="../js/notifications.js"></script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('newReleases').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('popularActors').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const updateDateElements = document.querySelectorAll('.updateDate');
-            const today = new Date();
-            const options = { year: 'numeric', month: 'long', day: 'numeric' };
-            const formattedDate = today.toLocaleDateString('en-US', options);
-            const formattedDateISO = today.toISOString().split('T')[0];
-
-            updateDateElements.forEach(element => {
-                element.textContent = formattedDate;
-                element.setAttribute('datetime', formattedDateISO);
-            });
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script>
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        let today = new Date();
-        today.setFullYear(today.getFullYear() - 18);
-        let year = today.getFullYear();
-        let month = (today.getMonth() + 1).toString().padStart(2, '0');
-        let day = today.getDate().toString().padStart(2, '0');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-
-    <footer style="margin-top: 20px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/offline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/offline.html
deleted file mode 100644
index 3ab9890e..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/offline.html
+++ /dev/null
@@ -1,798 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>You're Offline - The MovieVerse</title>
-    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/offline.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:title" content="You're Offline - The MovieVerse">
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/offline.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="You're Offline - The MovieVerse">
-    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body class="movie-details-body">
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="center-text" style="padding: 150px;">
-        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">You're Offline</div>
-        <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
-        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 500px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/privacy-policy.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/privacy-policy.html
deleted file mode 100644
index f40bf2dc..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/privacy-policy.html
+++ /dev/null
@@ -1,395 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Privacy Policy - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta property="og:title" content="Privacy Policy - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Privacy Policy - The MovieVerse">
-    <meta name="twitter:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <meta name="theme-color" content="#7378c5">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body, html {
-            margin: 0;
-            padding: 0;
-            overflow-x: hidden;
-        }
-        .content-area {
-            margin: 0 auto;
-            max-width: 800px;
-            padding: 0;
-            text-align: center;
-        }
-        #linkWeb {
-            color: white;
-        }
-        #linkWeb:hover {
-            color: #ff8623;
-            text-decoration: underline;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-                margin-top: 10px;
-            }
-        }
-        @media (min-width: 900px) {
-            header {
-                margin-top: 4px !important;
-            }
-        }
-        header {
-            margin-top: -5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        h2 {
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-            #form1 {
-                margin-top: 5px !important;
-            }
-        }
-        #form1 {
-            margin-top: 20px;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -20px; margin-top: -5px !important;" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='https://movie-verse.com'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#introduction">Introduction</a></li>
-            <li><a href="#consent">Consent</a></li>
-            <li><a href="#subheading2">Information We Collect</a></li>
-            <li><a href="#subheading">How We Use Your Information</a></li>
-            <li><a href="#subheading3">Log Files</a></li>
-            <li><a href="#subheading4">Cookies and Web Beacons</a></li>
-            <li><a href="terms-of-service.html">Terms of Service</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main class="content-area" style="text-align: center">
-        <div style="text-align: center; width: 90%; margin-top: 25px">
-            <div style="font-weight: bold; font-size: 30px" id="privacy-header">Privacy Policy</div>
-        </div>
-        <div id="introduction" style="text-align: center; width: 90%">
-            <h2 style="cursor: pointer">Introduction</h2>
-            <p>At The MovieVerse, accessible from <a id="linkWeb" href="https://movie-verse.com">https://movie-verse.com</a>, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by The MovieVerse and how we use it.</p>
-        </div>
-        <div id="consent" style="text-align: center; width: 90%">
-            <h2 style="cursor: pointer">Consent</h2>
-            <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms. For our Terms and Conditions, please visit the <a id="linkWeb" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">Terms and Conditions</a> page.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading2">
-            <h2 style="cursor: pointer">Information we collect</h2>
-            <p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
-            <p>If you contact us directly, we may receive additional information about you such as your name, email address, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
-        </div>
-        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading">
-            <h2 style="cursor: pointer">How we use your information</h2>
-            <p>We use the information we collect in various ways, including to:</p>
-            <ul style="color: white; list-style: none; width: 90%">
-                <li>1. Provide, operate, and maintain our website</li>
-                <li>2. Improve, personalize, and expand our website</li>
-                <li>3. Understand and analyze how you use our website</li>
-                <li>4. Develop new products, services, features, and functionality</li>
-                <li>5. Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
-                <li>6. Send you emails</li>
-                <li>7. Find and prevent fraud</li>
-                <li>8. Log Files</li>
-            </ul>
-        </div>
-        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading3">
-            <h2 style="cursor: pointer">Log Files</h2>
-            <p>The MovieVerse follows a standard procedure of using log files.</p>
-            <p>These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics.</p>
-            <p>These are not linked to any information that is personally identifiable.</p>
-            <p>The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
-        </div>
-        <div style="text-align: center; margin-bottom: 300px; width: 90%; cursor: pointer" id="subheading4">
-            <h2 style="cursor: pointer">Cookies and Web Beacons</h2>
-            <p>Like any other website, The MovieVerse uses 'cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited.</p>
-            <p>The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
-            <p>We may analyze user behavior through the use of cookies and web beacons with Google Analytics. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. We partner with Google to use the data collected to track and monitor the use of our website.</p>
-            <p>For more general information on cookies, please read <a id="linkWeb" href="https://www.cookieconsent.com/what-are-cookies/">"What Are Cookies"</a>.</p>
-        </div>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script src="../js/privacy-policy.js"></script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/profile.ejs b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/profile.ejs
deleted file mode 100644
index 9fd52920..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/profile.ejs
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>User Profile</title>
-    <link rel="stylesheet" href="../css/style.css">
-</head>
-<body>
-<header>
-    <nav>
-        <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="/profile">Profile</a></li>
-        </ul>
-    </nav>
-</header>
-<main>
-    <section class="profile-container">
-        <h1>User Profile</h1>
-        <% if (user) { %>
-            <div class="profile-info">
-                <img src="<%= user.avatar %>" alt="Profile Avatar" class="profile-avatar">
-                <h2><%= user.name %></h2>
-                <p>Email: <%= user.email %></p>
-                <p>Location: <%= user.location %></p>
-                <p>Member since: <%= user.createdAt %></p>
-                <p>Favorite Movies:</p>
-                <ul>
-                    <% user.favoriteMovies.forEach(movie => { %>
-                        <li><%= movie.title %></li>
-                    <% }) %>
-                </ul>
-                <p>Favorite Genres:</p>
-                <ul>
-                    <% user.favoriteGenres.forEach(genre => { %>
-                        <li><%= genre %></li>
-                    <% }) %>
-                </ul>
-                <p>Favorite Actors:</p>
-                <ul>
-                    <% user.favoriteActors.forEach(actor => { %>
-                        <li><%= actor.name %></li>
-                    <% }) %>
-                </ul>
-                <p>
-                    <a href="/profile/edit">Edit Profile</a>
-                </p>
-            </div>
-        <% } else { %>
-            <p>User not found.</p>
-        <% } %>
-    </section>
-</main>
-<footer>
-    <p>&copy; 2024 The MovieVerse. All rights reserved.</p>
-</footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/reset-password.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/reset-password.html
deleted file mode 100644
index 3727e104..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/reset-password.html
+++ /dev/null
@@ -1,1097 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Reset Password - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html">
-    <meta property="og:title" content="Reset Password - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Reset Password - The MovieVerse">
-    <meta name="twitter:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        .password-reset-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-
-        .password-reset-form-container input[type="email"],
-        .password-reset-form-container input[type="password"],
-        .password-reset-form-container input[type="text"],
-        .password-reset-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-
-        #local-time {
-            transform: translateX(12%);
-        }
-
-        .password-reset-form-container button[type="submit"],
-        .password-reset-form-container button[type="button"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .password-reset-form-container button:hover {
-            background-color: #22254b;
-            color: white;
-        }
-
-        .password-reset-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        .password-reset-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-
-        #my-heading {
-            margin-top: 24px !important;
-        }
-
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <div class="password-reset-form-container" id="password-reset-form-container" style="margin-bottom: 300px">
-        <form id="resetPasswordForm">
-            <h2>Reset Password</h2>
-            <p style="color: black">Forgot your password? No worries! Enter your email to verify your account and reset your password.</p>
-            <input type="email" id="resetEmail" placeholder="Enter your email" required>
-            <button type="submit">Verify Account</button>
-            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
-        </form>
-        <div id="newPasswordFields" style="display: none;">
-            <p style="color: black">Great news! Your account has been verified. Now, enter and confirm your new password below.</p>
-            <input type="password" id="newPassword" placeholder="New Password" required>
-            <input type="password" id="confirmNewPassword" placeholder="Confirm New Password" required>
-            <div style="margin-top: 10px; margin-bottom: 10px">
-                <label>
-                    <input type="checkbox" id="togglePassword"> Show Password
-                </label>
-            </div>
-            <button type="button" id="updatePasswordButton">Update Password</button>
-        </div>
-    </div>
-
-    <footer style="margin-top: 750px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <script src="../js/reset-password.js" type="module"></script>
-
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('newPassword');
-            const confirmPasswordInput = document.getElementById('confirmNewPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-                confirmPasswordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-                confirmPasswordInput.type = 'password';
-            }
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-    </script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/search.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/search.html
deleted file mode 100644
index 683f51f8..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/search.html
+++ /dev/null
@@ -1,921 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
-<head>
-    <meta charset="UTF-8">
-    <title>Search Results - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:title" content="Search Results - The MovieVerse">
-    <meta property="og:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/search.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/search.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Search Results - The MovieVerse">
-    <meta name="twitter:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <script src="../js/search.js"></script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #local-time {
-            margin-left: 5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #ad-container {
-            display: block !important;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px" class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <main id="movie-match-main" style="margin-top: 10px; margin-bottom: 150px">
-        <h2 id="search-results-label">Search Results</h2>
-        <div class="category-buttons">
-            <button data-category="movie" onclick="showResults('movie')">Movies</button>
-            <button data-category="tv" onclick="showResults('tv')">TV Series</button>
-            <button data-category="person" onclick="showResults('person')">People</button>
-        </div>
-        <button id="toggle-filters-btn">Filter & Sort Results</button>
-        <!-- Filters for Movies -->
-        <div id="movie-tv-filters" style="display: none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="genre-filter">Genre:</label>
-            <select id="genre-filter">
-                <option value="">Select Genre</option>
-                <!-- Populated with genres -->
-            </select>
-            <label for="language-filter">Language:</label>
-            <select id="language-filter">
-                <option value="">Select Language</option>
-            </select>
-            <label for="year-filter">Year:</label>
-            <input type="number" id="year-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
-            <label style="vertical-align: center" for="rating-filter">Rating:</label>
-            <input type="range" id="rating-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
-            <span id="rating-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-movie"><strong>Sort by:</strong></label>
-            <select id="sort-movie" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
-                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
-                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
-            </select>
-        </div>
-        <!-- Filters for TV Series -->
-        <div id="tv-filters" style="display: none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="genre-tv-filter">Genre:</label>
-            <select id="genre-tv-filter">
-                <option value="">Select Genre</option>
-                <!-- Populated with genres -->
-            </select>
-            <label for="language-tv-filter">Language:</label>
-            <select id="language-tv-filter">
-                <option value="">Select Language</option>
-            </select>
-            <label for="year-tv-filter">Year:</label>
-            <input type="number" id="year-tv-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
-            <label style="vertical-align: center" for="rating-tv-filter">Rating:</label>
-            <input type="range" id="rating-tv-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
-            <span id="rating-tv-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-tv"><strong>Sort by:</strong></label>
-            <select id="sort-tv" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
-                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
-                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
-            </select>
-        </div>
-        <!-- Filters for People -->
-        <div id="people-filters" style="display:none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="profession-filter">Profession:</label>
-            <select id="profession-filter">
-                <option value="">Select Profession</option>
-                <option value="Acting">Acting</option>
-                <option value="Directing">Directing</option>
-            </select>
-            <label for="gender-filter">Gender:</label>
-            <select id="gender-filter">
-                <option value="">Select Gender</option>
-                <option value="2">Male</option>
-                <option value="1">Female</option>
-            </select>
-            <label for="popularity-filter">Popularity Score:</label>
-            <input type="range" id="popularity-filter" min="0" max="100" step="1" value="5" title="Popularity" />
-            <span id="popularity-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-people"><strong>Sort by:</strong></label>
-            <select id="sort-people" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-            </select>
-        </div>
-        <div id="movie-match-container1" class="movie-match-container1">
-            <main id="results"></main>
-        </div>
-    </main>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 90px; right: 10px; z-index: 10012" title="Back to top">Back to Top</button>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 10012" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w300${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/settings.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/settings.html
deleted file mode 100644
index 3780f1f0..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/settings.html
+++ /dev/null
@@ -1,1231 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>App Settings - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <meta name="description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/settings.html">
-    <meta property="og:title" content="App Settings - The MovieVerse">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/settings.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.webp"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="App Settings - The MovieVerse">
-    <meta name="twitter:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.webp"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .settings-container {
-            text-align: center;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .settings-section {
-            margin-bottom: 30px;
-            width: 80%;
-            max-width: 500px;
-        }
-        .settings-section select,
-        .settings-section input[type="color"] {
-            width: 100%;
-            padding: 10px;
-            border-radius: 5px;
-            border: 2px solid #7378c5;
-            background-color: #22254b;
-            color: white;
-            font-size: 16px;
-            margin-top: 10px;
-        }
-        .settings-section h2 {
-            color: #ff8623;
-            margin-bottom: 10px;
-        }
-        .settings-section label {
-            font-size: 20px;
-            color: #ff8623;
-            display: block;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #reset-button {
-            display: block;
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            font-size: 1rem;
-            border-radius: 8px;
-            cursor: pointer;
-            margin: 20px auto;
-        }
-        #reset-button:hover {
-            background-color: #7378c5;
-            transition: background-color 0.3s ease;
-        }
-        #search-results-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
-            margin-left: 25px;
-        }
-        #search-title {
-            margin: 0;
-        }
-        .button-group button {
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            font-size: 1rem;
-            border-radius: 8px;
-            cursor: pointer;
-            margin-right: 10px;
-        }
-        .button-group button:hover {
-            background-color: #7378c5;
-            transition: background-color 0.3s ease;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            #heading {
-                margin-top: -5px;
-            }
-            #my-heading {
-                margin-top: 25px !important;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .image-container {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            margin-bottom: 10px;
-            border-radius: 5px;
-            background-color: #7378c5;
-            text-align: center;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            cursor: pointer;
-        }
-        .image-container:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        .image-container img {
-            margin-left: 10px;
-            cursor: pointer;
-            border-radius: 5px;
-            transition: transform 0.2s;
-        }
-        .image-container img:hover {
-            transform: scale(1.1);
-        }
-        .image-container input[type="checkbox"] {
-            margin-right: 10px;
-        }
-        .image-name {
-            margin-left: 10px;
-            font-size: 1rem;
-            color: #fff;
-        }
-        #delete-selected-images-btn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-            display: inline-block;
-            font: inherit;
-            margin: 20px auto;
-        }
-        #delete-selected-images-btn:hover {
-            background-color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="heading">
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 5px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <main id="settings-container" class="settings-container" style="margin-bottom: 50px">
-        <!-- Background Setting -->
-        <div class="settings-section">
-            <h2>Change App Background</h2>
-            <select id="background-select" style="font: inherit">
-                <option style="font: inherit" value="../../images/universe-1.webp">Default</option>
-                <option style="font: inherit" value="../../images/universe-2.webp">Universe 1</option>
-                <option style="font: inherit" value="../../images/universe-22.webp">Universe 2</option>
-                <option style="font: inherit" value="../../images/universe-3.webp">Universe 3</option>
-                <option style="font: inherit" value="../../images/universe-4.webp">Universe 4</option>
-                <option style="font: inherit" value="../../images/universe-5.webp">Universe 5</option>
-                <option style="font: inherit" value="../../images/universe-6.webp">Universe 6</option>
-                <option style="font: inherit" value="../../images/universe-7.webp">Universe 7</option>
-                <option style="font: inherit" value="../../images/universe-8.webp">Universe 8</option>
-                <option style="font: inherit" value="../../images/universe-9.webp">Universe 9</option>
-                <option style="font: inherit" value="../../images/universe-10.webp">Universe 10</option>
-                <option style="font: inherit" value="../../images/universe-11.webp">Universe 11</option>
-                <option style="font: inherit" value="../../images/universe-12.webp">Universe 12</option>
-                <option style="font: inherit" value="../../images/universe-13.webp">Universe 13</option>
-                <option style="font: inherit" value="../../images/universe-14.webp">Universe 14</option>
-                <option style="font: inherit" value="../../images/universe-15.webp">Universe 15</option>
-                <option style="font: inherit" value="../../images/universe-16.webp">Universe 16</option>
-                <option style="font: inherit" value="../../images/universe-17.webp">Universe 17</option>
-                <option style="font: inherit" value="../../images/universe-18.webp">Universe 18</option>
-                <option style="font: inherit" value="../../images/universe-19.webp">Universe 19</option>
-                <option style="font: inherit" value="../../images/universe-20.webp">Universe 20</option>
-                <option style="font: inherit" value="../../images/universe-21.webp">Universe 21</option>
-                <option style="font: inherit" value="../../images/universe.webp">Universe 22</option>
-                <option style="font: inherit" value="../../images/universe-23.webp">Universe 23</option>
-                <option style="font: inherit" value="../../images/black.webp">Black</option>
-                <option style="font: inherit" value="../../images/grey.webp">Grey</option>
-                <option style="font: inherit" value="../../images/blue.webp">Blue</option>
-                <option style="font: inherit" value="../../images/silver.webp">Silver</option>
-                <option style="font: inherit" value="../../images/gold.webp">Gold</option>
-                <option style="font: inherit" value="../../images/rose.webp">Rose</option>
-                <option style="font: inherit" value="../../images/pink.webp">Pink</option>
-                <option style="font: inherit" value="../../images/red.webp">Red</option>
-                <option style="font: inherit" value="../../images/green.webp">Green</option>
-                <option style="font: inherit" value="../../images/brown.webp">Brown</option>
-                <option style="font: inherit" value="../../images/purple.webp">Purple</option>
-                <option style="font: inherit" value="../../images/orange.webp">Orange</option>
-                <option style="font: inherit" value="../../images/yellow.webp">Light Yellow</option>
-            </select>
-        </div>
-        <div class="settings-section">
-            <h2>Upload A Custom Background</h2>
-            <input type="file" id="custom-bg-upload" accept="image/*" style="margin-bottom: 10px; padding-left: 10px; font: inherit">
-            <input type="text" id="custom-bg-name" placeholder="Enter image name..." style="margin-bottom: 10px; font: inherit">
-            <div class="button-group">
-                <button id="upload-bg-btn" style="font: inherit">Upload</button>
-                <button id="delete-uploaded-btn" style="font: inherit">Delete Uploaded Images</button>
-            </div>
-        </div>
-        <div class="settings-section" id="delete-images-section" style="display: none;">
-            <h2>Select Images to Delete</h2>
-            <div id="custom-images-container"></div>
-            <button id="delete-selected-images-btn">Delete Selected Images</button>
-        </div>
-        <!-- Text Color Setting -->
-        <div class="settings-section">
-            <h2>Change Text Color</h2>
-            <label for="text-color-input">Text Color:</label>
-            <input type="color" style="min-height: 50px" id="text-color-input">
-        </div>
-        <!-- Font Size Setting -->
-        <div class="settings-section">
-            <h2>Change Font Size</h2>
-            <label style="font: inherit" for="font-size-select">Font Size:</label>
-            <select style="font: inherit" id="font-size-select">
-                <option style="font: inherit" value="small">Small</option>
-                <option style="font: inherit" value="medium" selected>Medium</option>
-                <option style="font: inherit" value="large">Large</option>
-            </select>
-        </div>
-        <button style="font: inherit" id="reset-button">Reset to Defaults</button>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 200px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/settings.js"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, span, div, button, input, select, textarea').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/sign-in.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/sign-in.html
deleted file mode 100644
index 40df0ef7..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/sign-in.html
+++ /dev/null
@@ -1,1077 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Sign In - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Sign In - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Sign In - The MovieVerse">
-    <meta name="twitter:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-        #local-time {
-            transform: translateX(12%);
-        }
-        .sign-in-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .sign-in-form-container h1 {
-            color: black;
-        }
-        .sign-in-form-container p {
-            color: black;
-        }
-        .sign-in-form-container input[type="email"],
-        .sign-in-form-container input[type="password"],
-        .sign-in-form-container input[type="text"],
-        .sign-in-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .sign-in-form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .sign-in-form-container button[type="button"] {
-            background-color: #f0f0f0;
-            color: #333;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #createAccountBtn:hover {
-            background-color: #d3d3d3;
-            color: #1B1B1B;
-        }
-        .sign-in-form-container button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .sign-in-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .sign-in-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-        header {
-            margin-top: -5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="sign-in-form-container" style="margin-bottom: 390px">
-        <form id="signInForm">
-            <h2>Sign In</h2>
-            <p>Sign in to save your stats, watchlists, get personalized movie recommendation, join our community, and more!</p>
-            <input type="email" id="signInEmail" placeholder="Email" required>
-            <input type="password" id="signInPassword" placeholder="Password" required>
-            <label style="margin-top: 10px; margin-bottom: 10px">
-                <input type="checkbox" id="togglePassword"> Show Password
-            </label>
-            <button type="submit">Sign In</button>
-            <button type="button" id="createAccountBtn">Create an Account</button>
-            <p>Forgot password? Click <a style="text-decoration: underline" id="githubLink1" href="reset-password.html">below</a> to reset it.</p>
-            <button type="button" id="resetPasswordBtn" onclick="window.location.href='reset-password.html'">Reset Password</button>
-        </form>
-    </div>
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('signInPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/sign-in.js" type="module"></script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/support.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/support.html
deleted file mode 100644
index a02e4a31..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/support.html
+++ /dev/null
@@ -1,1101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Support - The MovieVerse</title>
-    <meta name="description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/support.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/support.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta property="og:title" content="Support - The MovieVerse">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Support - The MovieVerse">
-    <meta name="twitter:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .form-container h1 {
-            color: #ff8623;
-        }
-        .form-container input,
-        .form-container textarea,
-        .form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .form-container button[type="submit"]:hover {
-            background-color: #ff8623;
-        }
-        .form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        #supportBtn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-            margin-top: 20px;
-        }
-        #supportBtn:hover {
-            background-color: #ff8623;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        @media (min-width: 900px) {
-            #my-heading {
-                margin-top: 15px !important;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body class="movie-details-body">
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="form-container">
-        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Contact Support</div>
-        <p style="color: black">Have a question or need help? Contact us and we'll take a look at your request as soon as possible.</p>
-        <form action="https://formspree.io/f/xdoqzzao" method="POST">
-            <input type="text" id="name" name="name" placeholder="Your Name" required>
-            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
-            <textarea id="message" name="message" placeholder="Your Message" required></textarea>
-            <button type="submit">Send Message</button>
-            <p style="color: black">Have a feedback for us? Or any suggestions to improve our app? Click the button below to be redirected to the feedback page.</p>
-        </form>
-        <button id="supportBtn" onclick="window.location.href='feedback.html'" title="Submit a feedback">Submit Feedback</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-
-    <footer style="margin-top: 400px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/terms-of-service.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/terms-of-service.html
deleted file mode 100644
index 23daac13..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/terms-of-service.html
+++ /dev/null
@@ -1,399 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Terms of Service - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta property="og:title" content="Terms of Service - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Terms of Service - The MovieVerse">
-    <meta name="twitter:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body, html {
-            margin: 0;
-            padding: 0;
-            overflow-x: hidden;
-        }
-        .content-area {
-            margin: 0 auto;
-            max-width: 800px;
-            padding: 0;
-            text-align: center;
-        }
-        #mail {
-            color: white;
-        }
-        #mail:hover {
-            color: #ff8623;
-            text-decoration: underline;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            header {
-                margin-top: -5px;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        h2 {
-            color: white;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#agreement">Agreement to Terms</a></li>
-            <li><a href="#consent">Changes to Terms</a></li>
-            <li><a href="#subheading2">Use of Service</a></li>
-            <li><a href="#subheading">Content</a></li>
-            <li><a href="#subheading3">Ads</a></li>
-            <li><a href="#subheading4">Accounts</a></li>
-            <li><a href="#subheading5">Intellectual Property</a></li>
-            <li><a href="#subheading6">Links To Other Web Sites</a></li>
-            <li><a href="#subheading7">Termination</a></li>
-            <li><a href="#subheading8">Disclaimer</a></li>
-            <li><a href="#subheading9">Governing Law</a></li>
-            <li><a href="#subheading10">Contact Us</a></li>
-            <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main class="content-area">
-        <div style="text-align: center; width: 90%">
-            <div style="font-weight: bold; font-size: 28px; margin-top: 10px; color: #ff8623" id="tos-header">Terms of Service</div>
-        </div>
-        <div style="text-align: center; width: 90%" id="agreement">
-            <h2 style="cursor: pointer">Agreement to Terms</h2>
-            <p>By using The MovieVerse, you agree to be bound by these terms. If you disagree with any part of the terms, then you do not have permission to access the service.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="consent">
-            <h2 style="cursor: pointer">Changes to Terms</h2>
-            <p>We reserve the right to modify or replace these Terms at any time at our sole discretion. We will try to provide at least 30 days' notice prior to any new terms taking effect.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading2">
-            <h2 style="cursor: pointer">Use of Service</h2>
-            <p>The MovieVerse is provided on an "AS IS" and "AS AVAILABLE" basis. The service is for personal, non-commercial use only.</p>
-            <p>You may not use the service for any illegal or unauthorized purpose. You must not, in the use of the service, violate any laws in your jurisdiction.</p>
-            <p>You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the service, use of the service, or access to the service without express written permission by us.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading">
-            <h2 style="cursor: pointer">Content</h2>
-            <p>Content found on or through this Service are the property of The MovieVerse or used with permission. You may not distribute, modify, transmit, reuse, download, repost, copy, or use said Content, whether in whole or in part, for commercial purposes or for personal gain, without express advance written permission from us.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading3">
-            <h2 style="cursor: pointer">Ads</h2>
-            <p>During use of the Service, you may enter into correspondence with or participate in promotions of advertisers or sponsors showing their goods or services through the Service. Any such activity, and any terms, conditions, warranties or representations associated with such activity, is solely between you and the applicable third-party.</p>
-            <p>We display ads on the Service to help us keep our servers and databases running and free for everyone. We're committed to placing non-intrusive ads only, which means no pop-ups, no auto-playing videos, and no ads that interfere with your experience on the site.</p>
-            <p>If you encounter any ads that are inappropriate, misleading, or intrusive, please let us know by contacting us at using the Feedback form <a style="color: white" href="feedback.html">here</a>.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading4">
-            <h2 style="cursor: pointer">Accounts</h2>
-            <p>When you create an account with us, you guarantee that the information you provide us is accurate, complete, and current at all times. Inaccurate, incomplete, or obsolete information may result in the immediate termination of your account on the Service.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading5">
-            <h2 style="cursor: pointer">Intellectual Property</h2>
-            <p>The Service and its original content, features, and functionality are and will remain the exclusive property of The MovieVerse and its licensors.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading6">
-            <h2 style="cursor: pointer">Links To Other Web Sites</h2>
-            <p>Our Service may contain links to third-party web sites or services that are not owned or controlled by The MovieVerse. We have no control over, and assume no responsibility for the content, privacy policies, or practices of any third-party web sites or services.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading7">
-            <h2 style="cursor: pointer">Termination</h2>
-            <p>We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of the Terms.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading8">
-            <h2 style="cursor: pointer">Disclaimer</h2>
-            <p>Your use of the Service is at your sole risk. The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading9">
-            <h2 style="cursor: pointer">Governing Law</h2>
-            <p>These Terms shall be governed and construed in accordance with the laws of the country where The MovieVerse is based (the United States of America), without regard to its conflict of law provisions.</p>
-            <p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
-        </div>
-        <div style="text-align: center; width: 90%; margin-bottom: 300px" id="subheading10">
-            <h2 style="cursor: pointer">Contact Us</h2>
-            <p>If you have any questions about these Terms, please contact us at <a id="mail" href="mailto:info@movie-verse.com">info@movie-verse.com</a>.</p>
-        </div>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script src="../js/terms-of-service.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/trivia.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/trivia.html
deleted file mode 100644
index d2bc5201..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/trivia.html
+++ /dev/null
@@ -1,1173 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>MovieVerse Trivia - Test Your Movie Knowledge</title>
-    <link rel="stylesheet" href="../css/trivia.css">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html">
-    <meta property="og:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
-    <meta name="twitter:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        label {
-            cursor: pointer;
-        }
-        label:hover {
-            color: #f509d9;
-        }
-        #my-heading {
-            margin-top: 25px;
-        }
-        @keyframes dropIn {
-            0% {
-                opacity: 0;
-                transform: translateY(-50px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: dropIn 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 0.5s;
-        }
-        #form {
-            margin-top: 16px;
-        }
-        @media (max-width: 600px) {
-            #my-heading {
-                margin-top: 10px;
-            }
-            #form {
-                margin-top: 0;
-            }
-        }
-        #ad-container1 {
-            display: block;
-        }
-        #githubLink {
-            color: white !important;
-        }
-        #githubLink:hover {
-            color: #ff8623 !important;
-            transition: 0.1s ease-in;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @media (min-width: 768px) {
-            #my-heading {
-                margin-top: 19px;
-            }
-            #form {
-                margin-top: 10px;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #local-time {
-            cursor: pointer;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1.5s;
-        }
-        #local-time p,
-        #local-time div {
-            opacity: 0;
-            animation: dropIn 1s ease forwards 2s;
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-bottom: -50px; margin-top: 9px">
-        <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 215px" class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="#0">Question 1</a></li>
-            <li><a href="#1">Question 2</a></li>
-            <li><a href="#2">Question 3</a></li>
-            <li><a href="#3">Question 4</a></li>
-            <li><a href="#4">Question 5</a></li>
-            <li><a href="#5">Question 6</a></li>
-            <li><a href="#6">Question 7</a></li>
-            <li><a href="#7">Question 8</a></li>
-            <li><a href="#8">Question 9</a></li>
-            <li><a href="#9">Question 10</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <div>
-        <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
-    </div>
-    <div id="result-modal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3>Trivia Results</h3>
-                <span class="close-button" title="Close the trivia results modal">&times;</span>
-            </div>
-            <div id="progress-circle" class="progress-circle">
-                <div id="correct-answers"></div>
-            </div>
-            <p id="result-text"></p>
-        </div>
-    </div>
-    <main id="main"></main>
-    <form id="quiz-form" style="margin-bottom: 50px">
-        <div id="quiz-container"></div>
-        <button type="button" id="regenerate-questions" class="button" style="color: black">Get New Questions</button>
-        <button type="submit" id="submit" class="button" style="color: black">Submit Answers</button>
-    </form>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0; color: white">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="color: white; margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/quiz.js" type="module"></script>
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p id="footerP" style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" id="back-top">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-
-        document.getElementById('back-top').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/tv-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/tv-details.html
deleted file mode 100644
index 6898fd09..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/tv-details.html
+++ /dev/null
@@ -1,938 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>TV Series Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/tv-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="TV Series Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="TV Series Details - The MovieVerse">
-    <meta name="twitter:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #rating {
-            color: white !important;
-        }
-        #rating:hover {
-            color: #ff8623 !important;
-        }
-        #favorite-btn:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        .favorited:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #homepage {
-            color: white;
-        }
-        #homepage:hover {
-            color: #ff8623;
-        }
-        #prod-companies {
-            color: white;
-        }
-        #prod-companies:hover {
-            color: #ff8623;
-        }
-        header {
-            margin-top: 9px;
-        }
-        @media (max-width: 600px) {
-            #my-heading {
-                margin-top: 10px;
-            }
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            header {
-                margin-top: -5px;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .cast-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-        }
-        .cast-member-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            margin: 5px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .cast-member-image {
-            width: 100%;
-            height: 155px;
-            object-fit: cover !important;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .cast-member-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .cast-member-details {
-            width: 100%;
-        }
-        .cast-member-name, .cast-member-role {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-            white-space: normal;
-            text-align: center;
-        }
-        .similar-tv-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-        }
-        .similar-tv-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .similar-tv-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .similar-tv-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .similar-tv-name {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-        .similar-tv-link {
-            text-decoration: none;
-            color: #333;
-        }
-        #movie-details-container {
-            margin-top: 20px;
-        }
-        @media (max-width: 767px) {
-            #movie-details-container {
-                margin-top: 0;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-    <main id="main" style="margin-left: 35px; height: 0"></main>
-    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px;">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading TV Series Details..." style="width: 25vw; border-radius: 8px" title="Click to view full-size image" />
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
-            <div id="comments-section">
-                <h3>TV Show Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Comments Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This TV Series</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
-                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this TV series">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right" style="position: relative; overflow: hidden">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/tv-details.js"></script>
-    <script src="../js/add-to-tv-favorites.js" type="module"></script>
-    <script type="module">
-        import { toggleFavoriteTVSeries, checkAndUpdateFavoriteButtonTVSeries } from '../js/add-to-tv-favorites.js';
-        document.addEventListener('DOMContentLoaded', () => {
-            const favoriteBtn = document.getElementById('favorite-btn');
-            if (favoriteBtn) {
-                favoriteBtn.addEventListener('click', toggleFavoriteTVSeries);
-            }
-        });
-        checkAndUpdateFavoriteButtonTVSeries();
-    </script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('movie-image').addEventListener('click', function() {
-            let imageUrl = this.src.replace('w780', 'w1280');
-            const modalHtml = `<div id="image-modal" style="z-index: 10000002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                    <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="TV Series Poster" />
-                                    <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                               </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-    <script src="../js/comments-tv.js" type="module"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/user-profile.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/user-profile.html
deleted file mode 100644
index 98b22596..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/html/user-profile.html
+++ /dev/null
@@ -1,1337 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>User Profile - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="User Profile - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html" />
-    <meta property="og:site_name" content="User Profile - The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="User Profile - The MovieVerse">
-    <meta name="twitter:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        h1 {
-            color: #ff8623;
-        }
-        h1:hover {
-            color: #f509d9;
-            transition: 0.1s ease;
-        }
-        .profile-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .profile-container input[type="text"],
-        .profile-container input[type="date"],
-        .profile-container input[type="file"],
-        .profile-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .profile-container button {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .profile-container button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .profile-container h2, .profile-container p {
-            color: black;
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgba(0,0,0,0.4);
-            padding-top: 60px;
-        }
-        .modal-content {
-            background-color: #fefefe;
-            margin: 5% auto;
-            padding: 20px;
-            border: 1px solid #888;
-            width: 80%;
-            max-width: 400px;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(5px);
-        }
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-        .close:hover,
-        .close:focus {
-            color: #ff8623;
-            text-decoration: none;
-            cursor: pointer;
-        }
-        #editProfileModal {
-            z-index: 1000;
-            width: 100vw !important;
-        }
-        #editProfileModal .modal-content {
-            background-color: #373b69;
-            width: 400px !important;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
-        }
-        #editProfileForm input {
-            font: inherit;
-            border-radius: 8px;
-        }
-        #editProfileForm button {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #editProfileForm button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .modal-header h2 {
-            margin: 0;
-            flex-grow: 1;
-        }
-        .modal-content {
-            padding-bottom: 20px;
-        }
-        .dob-container {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-        .dob-container label {
-            margin-right: 10px;
-            margin-top: 10px;
-            color: black;
-        }
-        .dob-container input[type="date"] {
-            flex-grow: 1;
-        }
-        .profile-image-container {
-            position: relative;
-            display: inline-block;
-        }
-        #removeProfileImage {
-            position: absolute;
-            top: 0;
-            background: none;
-            border: none;
-            color: red;
-            font-size: 30px;
-            font-weight: bold;
-            cursor: pointer;
-            padding: 0;
-            line-height: 1;
-            margin: 0;
-        }
-        #removeProfileImage:hover {
-            color: #ff8623;
-        }
-        #editProfileForm .modal-content h2 {
-            color: #ff8623;
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        #editProfileForm .modal-content label {
-            color: #fff;
-            margin-bottom: 10px;
-            display: block;
-        }
-        #editProfileForm .modal-content input[type="text"],
-        #editProfileForm .modal-content textarea {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            border: 1px solid #7378c5;
-            background-color: #22254b;
-            color: #fff;
-        }
-        #editProfileForm .modal-content button {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font: inherit;
-            display: block;
-            margin: 10px auto;
-            transition: background-color 0.3s ease;
-        }
-        #editProfileForm .modal-content select {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            border: 1px solid #7378c5;
-            background-color: #22254b;
-            color: #fff;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0 !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script src="../js/user-profile.js" type="module"></script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div id="welcomeMessage" style="color: #ff8623; font-weight: bold; font-size: 30px; text-align: center; margin-top: 30px;"></div>
-    <div class="search-users-container" id="search-users-container">
-        <input type="text" id="searchUserInput" placeholder="Search For Any MovieVerse User..." title="Remember that this search is case-sensitive!" />
-        <button id="searchUserBtn">Search</button>
-    </div>
-    <div id="searchUserResults" class="search-results-container"></div>
-    <button id="viewMyProfileBtn" style="margin-top: 20px;">View My Profile</button>
-    <div id="profileContainer" class="profile-container">
-        <div class="profile-image-container">
-            <img id="profileImage" style="cursor: pointer" title="Click to upload a new profile image" onclick="document.getElementById('imageUpload').click()" src="../../images/user-default.png" alt="Profile Image" />
-            <button id="removeProfileImage" title="Click to remove the current profile image" style="display: none;">&times;</button>
-        </div>
-        <input type="file" id="imageUpload" accept="image/*" hidden />
-        <button id="changeProfileImageBtn" onclick="document.getElementById('imageUpload').click()">Change Profile Image</button>
-        <div class="profile-info">
-            <div id="averageDisplays" style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
-                <div class="progress-container" id="container1" style="cursor: pointer">
-                    <svg class="progress-ring" width="100" height="100">
-                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
-                        <circle class="progress-ring__progress" id="avgMovieRatingCircle" cx="50" cy="50" r="40" />
-                        <text class="progress-ring__text" id="avgMovieRatingText" x="50" y="50"></text>
-                    </svg>
-                    <p><strong>Average Movie Rating</strong></p>
-                </div>
-                <div class="progress-container" id="container2" style="cursor: pointer">
-                    <svg class="progress-ring" width="100" height="100">
-                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
-                        <circle class="progress-ring__progress" id="avgTriviaScoreCircle" cx="50" cy="50" r="40" />
-                        <text class="progress-ring__text" id="avgTriviaScoreText" x="50" y="50"></text>
-                    </svg>
-                    <p><strong>Average Movie Trivia Score</strong></p>
-                </div>
-            </div>
-            <p id="usernameDisplay">Username: <span></span></p>
-            <p id="dobDisplay">Date of Birth: <span></span></p>
-            <p id="bioDisplay">Bio: <span></span></p>
-            <p id="favoriteGenresDisplay">Favorite Genres: <span></span></p>
-            <p id="locationDisplay">Location: <span></span></p>
-            <p id="favoriteMovieDisplay">Favorite Movie: <span></span></p>
-            <p id="hobbiesDisplay">Hobbies: <span></span></p>
-            <p id="favoriteActorDisplay"><strong>Favorite Actor:</strong> <span></span></p>
-            <p id="favoriteDirectorDisplay"><strong>Favorite Director:</strong> <span></span></p>
-            <p id="personalQuoteDisplay"><strong>Personal Quote:</strong> <span></span></p>
-            <p id="followingDisplay"><strong>Following:</strong> <span id="followingList"></span></p>
-            <p id="followersDisplay"><strong>Followers:</strong> <span id="followersList"></span></p>
-        </div>
-        <button id="editProfileBtn">Edit Profile Details</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <p id="signInPrompt" style="text-align: center; font-size: 24px; margin-top: 100px;"></p>
-    <div id="editProfileModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header" style="margin-bottom: 20px">
-                <h2>Edit Profile Details</h2>
-                <span class="close" onclick="closeModal()">&times;</span>
-            </div>
-            <form id="editProfileForm">
-                <div style="text-align: center">
-                    <label for="editUsername" style="color: white">Username:</label>
-                    <input type="text" id="editUsername" placeholder="Username">
-                </div>
-                <div style="text-align: center">
-                    <label for="editDob" style="color: white">Date of Birth:</label>
-                    <input type="date" id="editDob" style="padding-left: 5px; width: 100%" placeholder="Date of Birth" title="Click to select your date of birth"/>
-                </div>
-                <div style="text-align: center; margin-top: 20px">
-                    <label for="editBio" style="color: white">Bio:</label>
-                    <input type="text" id="editBio" placeholder="Bio">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteGenres" style="color: white">Favorite Genres:</label>
-                    <input type="text" id="editFavoriteGenres" placeholder="Favorite Genres">
-                </div>
-                <div style="text-align: center">
-                    <label for="editLocation" style="color: white">Location:</label>
-                    <input type="text" id="editLocation" placeholder="Location">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteMovie" style="color: white">Favorite Movie:</label>
-                    <input type="text" id="editFavoriteMovie" placeholder="Favorite Movie">
-                </div>
-                <div style="text-align: center">
-                    <label for="editHobbies" style="color: white">Hobbies:</label>
-                    <input type="text" id="editHobbies" placeholder="Hobbies">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteActor" style="color: white">Favorite Actor:</label>
-                    <input type="text" id="editFavoriteActor" placeholder="Favorite Actor">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteDirector" style="color: white">Favorite Director:</label>
-                    <input type="text" id="editFavoriteDirector" placeholder="Favorite Director">
-                </div>
-                <div style="text-align: center">
-                    <label for="editPersonalQuote" style="color: white">Personal Quote:</label>
-                    <input type="text" id="editPersonalQuote" placeholder="Personal Quote">
-                </div>
-                <button type="button" id="saveChanges">Save Changes</button>
-                <button type="button" id="cancelEdit" onclick="closeModal()">Cancel</button>
-            </form>
-        </div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        let today = new Date();
-        today.setFullYear(today.getFullYear() - 18);
-        let year = today.getFullYear();
-        let month = (today.getMonth() + 1).toString().padStart(2, '0');
-        let day = today.getDate().toString().padStart(2, '0');
-        let dateMinus18Years = `${year}-${month}-${day}`;
-        document.getElementById('editDob').value = dateMinus18Years;
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-    <footer style="margin-top: 800px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
index cbd545c2..cb97d18f 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -48,12 +47,10 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" as="style">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
-
     <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-
     <!-- Schema.org markup for Rich Results -->
     <script type="application/ld+json">
         {
@@ -114,7 +111,6 @@
             "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
         }
     </script>
-
     <style>
         @font-face {
             font-family: 'Poppins';
@@ -585,7 +581,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <ul id="newReleasesList"></ul>
         </div>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 10000000">
         <a id="heading-href" class="notranslate" style="cursor: pointer; text-align: center">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px !important; font-size: 2.1em; font-weight: bold;">
@@ -629,7 +624,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <li><a href="MovieVerse-Frontend/html/feedback.html">MovieVerse Feedback</a></li>
         </ul>
     </nav>
-
     <div class="mobile-sign-in-container">
         <button id="mobileGoogleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="mobileSignInOutText">Sign In</span>
@@ -641,17 +635,14 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <i class="fas fa-user" id="mobileProfileIcon"></i>
         </button>
     </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <div class="genres">
         <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2>
     </div>
     <div id="most-popular-pagination" class="pagination" style="text-align: center"></div>
     <main id="most-popular"></main>
-
     <div id="ad-container3" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -665,7 +656,6 @@ <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="recommendedDIV">
         <h2 id="other" style="cursor: pointer" title="Here are some personalized movie suggestions we've generated based on your preferences! Check them out, and let us know what you think!">
             Recommended For You: Personalized Movie Suggestions
@@ -673,7 +663,6 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     </div>
     <div id="recommended-pagination" class="pagination" style="text-align: center"></div>
     <main id="recommended"></main>
-
     <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -686,13 +675,11 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="award-winning-div">
         <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning Movies</h2>
     </div>
     <div id="award-winning-pagination" class="pagination" style="text-align: center"></div>
     <main id="award-winning"></main>
-
     <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -705,13 +692,11 @@ <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
         <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; margin-right: 10px; margin-top: 25px; cursor: pointer;">Change Director</button>
     </div>
     <main id="director-spotlight"></main>
-
     <div id="ad-container5" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -724,13 +709,11 @@ <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="action-div">
         <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</h2>
     </div>
     <div id="action-pagination" class="pagination" style="text-align: center"></div>
     <main id="action"></main>
-
     <div id="ad-container6" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -743,13 +726,11 @@ <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="vietnamese-div">
         <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese Movies</h2>
     </div>
     <div id="vietnamese-pagination" class="pagination" style="text-align: center"></div>
     <main id="vietnamese"></main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -762,13 +743,11 @@ <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="indian-div">
         <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian Movies</h2>
     </div>
     <div id="indian-pagination" class="pagination" style="text-align: center"></div>
     <main id="indian"></main>
-
     <div id="ad-container4" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -781,13 +760,11 @@ <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="korean-div">
         <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies</h2>
     </div>
     <div id="korean-pagination" class="pagination" style="text-align: center"></div>
     <main id="korean"></main>
-
     <div id="ad-container7" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -800,115 +777,96 @@ <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies<
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="tv-series-div">
         <h2 id="other" style="cursor: pointer">Binge-Worthy Series: Trending TV Series</h2>
     </div>
     <div id="tv-series-pagination" class="pagination" style="text-align: center"></div>
     <main id="tv-series" ></main>
-
     <div class="genres" id="hidden-gems-div">
         <h2 id="other" style="cursor: pointer">Hidden Treasures: Discover Gems in Cinema</h2>
     </div>
     <div id="hidden-gems-pagination" class="pagination" style="text-align: center"></div>
     <main id="hidden-gems"></main>
-
     <div class="genres" id="horror-div">
         <h2 id="other" style="cursor: pointer">Scream Queens & Slashers: Trending Horror Movies</h2>
     </div>
     <div id="horror-pagination" class="pagination" style="text-align: center"></div>
     <main id="horror"></main>
-
     <div class="genres" id="documentary-div">
         <h2 id="other" style="cursor: pointer">Real Stories: Trending Documentary Movies</h2>
     </div>
     <div id="documentary-pagination" class="pagination" style="text-align: center"></div>
     <main id="documentary" ></main>
-
     <div class="genres" id="animation-div">
         <h2 id="other" style="cursor: pointer">Animated Adventures: Trending Animated Movies</h2>
     </div>
     <div id="animation-pagination" class="pagination" style="text-align: center"></div>
     <main id="animation"></main>
-
     <div class="genres" id="sci-fi-div">
         <h2 id="other" style="cursor: pointer">Future Visions: Trending Science Fiction Movies</h2>
     </div>
     <div id="sci-fi-pagination" class="pagination" style="text-align: center"></div>
     <main id="sci-fi"></main>
-
     <div class="genres" id="western-div">
         <h2 id="other" style="cursor: pointer">Wild West: Trending Western Movies</h2>
     </div>
     <div id="western-pagination" class="pagination" style="text-align: center"></div>
     <main id="western"></main>
-
     <div class="genres" id="romantic-div">
         <h2 id="other" style="cursor: pointer">Love Is in the Air: Trending Romantic Movies</h2>
     </div>
     <div id="romantic-pagination" class="pagination" style="text-align: center"></div>
     <main id="romantic"></main>
-
     <div class="genres" id="thriller-div">
         <h2 id="other" style="cursor: pointer">Edge of Your Seat: Trending Thriller Movies</h2>
     </div>
     <div id="thriller-pagination" class="pagination" style="text-align: center"></div>
     <main id="thriller"></main>
-
     <div class="genres" id="war-div">
         <h2 id="other" style="cursor: pointer">War Stories: Trending War Movies</h2>
     </div>
     <div id="war-pagination" class="pagination" style="text-align: center"></div>
     <main id="war"></main>
-
     <div class="genres" id="mystery-div">
         <h2 id="other" style="cursor: pointer">Whodunit? Mystery & Intrigue in Trending Mystery Movies</h2>
     </div>
     <div id="mystery-pagination" class="pagination" style="text-align: center"></div>
     <main id="mystery"></main>
-
     <div class="genres" id="crime-div">
         <h2 id="other" style="cursor: pointer">Underworld Tales: Trending Crime Movies</h2>
     </div>
     <div id="crime-pagination" class="pagination" style="text-align: center"></div>
     <main id="crime"></main>
-
     <div class="genres" id="comedy-div">
         <h2 id="other" style="cursor: pointer">Laughs Galore: Trending Comedy Movies</h2>
     </div>
     <div id="comedy-pagination" class="pagination" style="text-align: center"></div>
     <main id="comedy"></main>
-
     <div class="genres" id="fantasy-div">
         <h2 id="other" style="cursor: pointer">Other Worlds: Trending Fantasy Movies</h2>
     </div>
     <div id="fantasy-pagination" class="pagination" style="text-align: center"></div>
     <main id="fantasy"></main>
-
     <div class="genres" id="family-div">
         <h2 id="other" style="cursor: pointer">Family Fun Time: Trending Family Movies</h2>
     </div>
     <div id="family-pagination" class="pagination" style="text-align: center"></div>
     <main id="family"></main>
-
     <div class="genres" id="musical-div">
         <h2 id="other" style="cursor: pointer">Enchanting Melodies: Trending Musical Movies</h2>
     </div>
     <div id="musical-pagination" class="pagination" style="text-align: center"></div>
     <main id="musical"></main>
-
     <div class="genres" id="drama-div">
         <h2 id="other" style="cursor: pointer">Emotional Journeys: Trending Drama Movies</h2>
     </div>
     <div id="drama-pagination" class="pagination" style="text-align: center"></div>
     <main id="drama"></main>
-
     <div class="genres" id="classic-div">
         <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movies</h2>
     </div>
     <div id="classic-pagination" class="pagination" style="text-align: center"></div>
     <main id="classic"></main>
-
     <button id="chat-button" onclick="window.location.href='MovieVerse-Frontend/html/chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
     <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
@@ -917,7 +875,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
     <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="MovieVerse-Frontend/html/chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -952,23 +909,19 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             <span>Top</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <footer style="margin-top: 40px">
         <p id="footer">© 2024 The MovieVerse. All rights reserved.</p>
         <p>Learn more <a href="MovieVerse-Frontend/html/about.html" id="githubLink10">about The MovieVerse</a> and <a href="MovieVerse-Frontend/html/notifications.html" id="githubLink8">what we offer.</a></p>
         <p style="font-size: 0.1px">View our demos at: <a href="MovieVerse-Frontend/html/inception.html" id="githubLink11">Inception</a>, <a href="MovieVerse-Frontend/html/christopher-nolan.html" id="githubLink16">Christopher Nolan</a>, <a href="MovieVerse-Frontend/html/leonardo-dicaprio.html" id="githubLink9">Leonardo DiCaprio</a>, use our <a href="MovieVerse-Frontend/html/chat.html" id="githubLink14">chat application</a>, or explore the <a href="MovieVerse-Frontend/html/user-profile.html" id="githubLink5">profile feature</a>!</p>
     </footer>
-
     <div id="google_translate_element"></div>
     <div id="translate_control">
         <div class="translate-trigger">Translate</div>
     </div>
-
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
         function googleTranslateElementInit() {
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/index.css b/MovieVerse-Mobile/platforms/ios/www/css/index.css
deleted file mode 100644
index ecea7e8e..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/css/index.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-* {
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-}
-
-body {
-    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-    background-color:#E4E4E4;
-    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
-    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
-    font-size:12px;
-    height:100vh;
-    margin:0px;
-    padding:0px;
-    /* Padding to avoid the "unsafe" areas behind notches in the screen */
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
-    text-transform:uppercase;
-    width:100%;
-}
-
-/* Portrait layout (default) */
-.app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
-    text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
-}
-
-/* Landscape layout (with min-width) */
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
-    .app {
-        background-position:left center;
-        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
-        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
-                                      /* offset horizontal: half of image width and text area width */
-    }
-}
-
-h1 {
-    font-size:24px;
-    font-weight:normal;
-    margin:0px;
-    overflow:visible;
-    padding:0px;
-    text-align:center;
-}
-
-.event {
-    border-radius:4px;
-    color:#FFFFFF;
-    font-size:12px;
-    margin:0px 30px;
-    padding:2px 0px;
-}
-
-.event.listening {
-    background-color:#333333;
-    display:block;
-}
-
-.event.received {
-    background-color:#4B946A;
-    display:none;
-}
-
-#deviceready.ready .event.listening { display: none; }
-#deviceready.ready .event.received { display: block; }
-
-@keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
-
-.blink {
-    animation:fade 3000ms infinite;
-    -webkit-animation:fade 3000ms infinite;
-}
-
-
-@media screen and (prefers-color-scheme: dark) {
-    body {
-        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
-    }
-}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/index.scss b/MovieVerse-Mobile/platforms/ios/www/css/index.scss
deleted file mode 100644
index 786e8d13..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/css/index.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-$font-family-poppins: "Poppins", sans-serif;
-$background-color-primary: #7378c5;
-$hover-color: #ff8623;
-$link-color: white;
-$link-hover-color: #f509d9;
-
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background: url("../../images/universe-1.png") no-repeat center center fixed;
-  background-size: cover;
-  font-family: $font-family-poppins;
-  margin: 0;
-  align-content: center;
-  overflow-x: hidden;
-  min-height: 100vh;
-  overflow-y: auto;
-}
-
-%button-style {
-  background-color: $background-color-primary;
-  color: black;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  &:hover {
-    background-color: $hover-color;
-    transition: 0.3s ease-in;
-  }
-}
-
-#movie-match-btn {
-  @extend %button-style;
-  position: fixed;
-  bottom: 220px;
-  right: 20px;
-}
-
-#submit-comment {
-  @extend %button-style;
-  padding: 10px 15px;
-}
-
-%link-style {
-  color: $link-color;
-  text-decoration: underline;
-  &:hover {
-    color: $link-hover-color;
-  }
-}
-
-#cast-info, #similar-tv, #director-link {
-  @extend %link-style;
-}
-
-@mixin modal-style {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  margin-top: 5px;
-}
-
-.modal-header {
-  @include modal-style;
-}
-
-.comments-controls {
-  display: flex;
-  align-items: center;
-  button:disabled {
-    cursor: not-allowed;
-  }
-  &.justify-start {
-    justify-content: start;
-  }
-  &.justify-center {
-    justify-content: center;
-    gap: 10px;
-    width: 100%;
-  }
-}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/navbar.scss b/MovieVerse-Mobile/platforms/ios/www/css/navbar.scss
deleted file mode 100644
index 6ff9d8ec..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/css/navbar.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-$breakpoint-mobile: 480px;
-$breakpoint-tablet: 768px;
-$breakpoint-desktop: 1024px;
-
-$navbar-background-color: #333;
-$navbar-text-color: #fff;
-$navbar-hover-color: #555;
-$mobile-menu-background-color: #222;
-
-@mixin responsive-visibility {
-  @media (max-width: $breakpoint-mobile) {
-    display: none;
-  }
-}
-
-.navbar {
-  background-color: $navbar-background-color;
-  color: $navbar-text-color;
-  padding: 1em;
-
-  .logo {
-    float: left;
-    font-size: 1.5em;
-    margin-right: 15px;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    float: right;
-
-    li {
-      display: inline;
-      margin-left: 15px;
-
-      a {
-        text-decoration: none;
-        color: $navbar-text-color;
-
-        &:hover {
-          color: $navbar-hover-color;
-        }
-      }
-    }
-  }
-
-  @media (max-width: $breakpoint-tablet) {
-    ul {
-      float: none;
-      text-align: center;
-
-      li {
-        display: block;
-        margin-top: 0.5em;
-      }
-    }
-  }
-}
-
-.mobile-menu-btn {
-  @include responsive-visibility;
-
-  display: inline-block;
-  background-color: $mobile-menu-background-color;
-  color: $navbar-text-color;
-  padding: 10px;
-  border: none;
-  cursor: pointer;
-}
-
-.mobile-menu {
-  display: none;
-
-  &.active {
-    display: block;
-    padding: 10px;
-    background-color: $mobile-menu-background-color;
-
-    ul {
-      text-align: center;
-
-      li {
-        margin-top: 10px;
-
-        a {
-          display: block;
-          color: $navbar-text-color;
-
-          &:hover {
-            background-color: $navbar-hover-color;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/profile.scss b/MovieVerse-Mobile/platforms/ios/www/css/profile.scss
deleted file mode 100644
index 78f9b2e3..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/css/profile.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-$primary-color: #4A90E2;
-$secondary-color: #50E3C2;
-$text-color: #4A4A4A;
-$background-color: #F5F7FA;
-$padding-standard: 15px;
-$border-radius-standard: 5px;
-
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin card-style {
-  background-color: white;
-  border-radius: $border-radius-standard;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  padding: $padding-standard;
-}
-
-body {
-  font-family: 'Poppins', sans-serif;
-  color: $text-color;
-  background-color: $background-color;
-}
-
-a {
-  color: $primary-color;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.profile-container {
-  @include flex-center;
-  flex-direction: column;
-}
-
-.profile-header {
-  @include flex-center;
-  flex-direction: column;
-  margin-bottom: 20px;
-
-  .profile-image {
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    margin-bottom: $padding-standard;
-  }
-
-  .profile-name {
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  .profile-bio {
-    text-align: center;
-    margin-top: $padding-standard;
-  }
-}
-
-.profile-content {
-  @include card-style;
-  margin: 20px auto;
-  width: 90%;
-  max-width: 600px;
-
-  .section {
-    &:not(:last-child) {
-      margin-bottom: 20px;
-    }
-
-    h2 {
-      border-bottom: 2px solid $primary-color;
-      padding-bottom: $padding-standard / 2;
-    }
-
-    p, ul {
-      margin-top: $padding-standard / 2;
-    }
-  }
-}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/reset.css b/MovieVerse-Mobile/platforms/ios/www/css/reset.css
deleted file mode 100644
index 7a836fce..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/css/reset.css
+++ /dev/null
@@ -1,43 +0,0 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/style.css b/MovieVerse-Mobile/platforms/ios/www/css/style.css
deleted file mode 100644
index f24d2b24..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/css/style.css
+++ /dev/null
@@ -1,4087 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-Light.ttf') format('truetype');
-    font-weight: 200;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-body {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    font-family: "Poppins", sans-serif;
-    margin: 0;
-    align-content: center;
-    overflow-x: hidden;
-    min-height: 100vh;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-}
-
-#heading-href {
-    text-decoration: none;
-}
-
-.cast-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.cast-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    width: 115px;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-.cast-image {
-    width: 100%;
-    height: 155px;
-    object-fit: cover;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.cast-item:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.cast-details {
-    width: 100%;
-}
-
-.actor-name, .actor-role {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-    white-space: normal;
-    text-align: center;
-}
-
-.actor-role {
-    font-style: italic;
-}
-
-.last-episode {
-    flex-direction: column;
-    align-items: center;
-    display: inline-block;
-}
-
-.last-episode strong {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.last-episode-image-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.last-episode-image {
-    max-width: 220px;
-    height: auto;
-    border-radius: 5px;
-}
-
-.last-episode-image:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.director-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.director-list {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.director-link {
-    display: flex;
-    align-items: center;
-    text-align: center;
-}
-
-.director-link .cast-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.director-link .cast-image {
-    width: 100%;
-    height: 155px;
-    margin-bottom: 5px;
-}
-
-.director-link .actor-name {
-    font-size: 12px;
-}
-
-.creators-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.creator-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    width: 115px;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-.creator-image {
-    width: 100%;
-    height: 155px;
-    object-fit: cover !important;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.creator-item:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.creator-details {
-    width: 100%;
-}
-
-.creator-name {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-}
-
-#movie-match-btn {
-    position: fixed;
-    bottom: 220px;
-    right: 20px;
-    background-color: #7378c5;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#user-name {
-    font: inherit;
-    border-radius: 8px;
-}
-
-#user-comment {
-    font: inherit;
-    border-radius: 8px;
-}
-
-#submit-comment {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-}
-
-#submit-comment:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.comments-controls {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-}
-
-button:disabled {
-    cursor: not-allowed;
-}
-
-.comments-controls {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-}
-
-#cast-info {
-    color: white;
-    text-decoration: underline;
-}
-
-#cast-info:hover {
-    color: #ff8623;
-}
-
-#similar-tv {
-    color: white;
-    text-decoration: underline;
-}
-
-#similar-tv:hover {
-    color: #ff8623;
-}
-
-#director-link {
-    color: white;
-    text-decoration: underline;
-}
-
-#director-link:hover {
-    color: #ff8623;
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 10px;
-    margin-top: 5px;
-}
-
-#toggle-filters-btn {
-    margin: 10px;
-    background-color: #7378c5;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.3s ease;
-    padding: 10px 20px;
-    font: inherit;
-}
-
-#toggle-filters-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease;
-}
-
-#movie-tv-filters, #people-filters, #tv-filters {
-    max-width: 500px;
-    margin: 4px auto;
-    padding: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    border: 2px solid #7378c5;
-    min-width: 290px;
-}
-
-#movie-tv-filters label, #movie-tv-filters select, #movie-tv-filters input[type="number"], #movie-tv-filters input[type="range"],
-#people-filters label, #people-filters select, #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters label, #tv-filters select, #tv-filters input[type="range"], #tv-filters input[type="number"] {
-    display: block;
-    width: 100%;
-    margin-bottom: 10px;
-    font-family: "Poppins", sans-serif;
-    color: #fff;
-}
-
-#movie-tv-filters label, #people-filters label, #tv-filters label {
-    margin-bottom: 5px;
-    font-size: 1rem;
-}
-
-#movie-tv-filters select, #people-filters select, #tv-filters select {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-tv-filters select:hover, #people-filters select:hover, #tv-filters select:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#movie-tv-filters select:focus, #people-filters select:focus, #tv-filters select:focus {
-    background-color: #7378c5;
-}
-
-#movie-tv-filters select:focus option:hover, #people-filters select:focus option:hover, #tv-filters select:focus option:hover {
-    background-color: #ff8623;
-}
-
-#movie-tv-filters input[type="number"], #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters input[type="range"], #tv-filters input[type="number"] {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-tv-filters input[type="number"]:hover, #people-filters input[type="range"]:hover, #people-filters input[type="number"]:hover, #tv-filters input[type="range"]:hover, #tv-filters input[type="number"]:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#reset-filters {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 25px;
-    border: none;
-    cursor: pointer;
-    color: white;
-    padding: 10px 15px;
-    margin-top: 30px;
-    display: block;
-    width: 100%;
-}
-
-#reset-filters:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#rating-filter {
-    vertical-align: top;
-}
-
-#movie-tv-filters span, #people-filters span {
-    font-weight: bold;
-    margin-left: 10px;
-}
-
-input[type=range] {
-    cursor: pointer;
-}
-
-#rating-value {
-    font: inherit;
-}
-
-.modal-header h3 {
-    flex-grow: 1;
-    text-align: center;
-    margin: 0;
-}
-
-.close {
-    cursor: pointer;
-    position: absolute;
-    right: 10px;
-}
-
-#year-filter::placeholder {
-    color: white;
-}
-
-#year-tv-filter::placeholder {
-    color: white;
-}
-
-#toggle-comment-modal, #prev-page, #next-page {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    color: white;
-}
-
-#toggle-comment-modal:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#prev-page:disabled, #next-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-#prev-page:disabled, #next-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-#prev-page:hover, #next-page:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#comments-section h3 {
-    text-align: center;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    padding-top: 100px;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0, 0, 0);
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-.modal-content {
-    position: relative;
-    background-color: #fefefe;
-    margin: auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    max-width: 500px;
-    border-radius: 10px;
-}
-
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-p {
-    text-align: center;
-    color: #a6967e;
-}
-
-.button2 {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    right: 18px;
-    position: absolute;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-}
-
-html {
-    scroll-behavior: smooth;
-    overflow-x: hidden;
-}
-
-.main2 {
-    text-align: center;
-    color: orange;
-    scroll-behavior: smooth;
-}
-
-.main2 p {
-    color: orange;
-}
-
-header {
-    background-color: transparent;
-    display: flex;
-    justify-content: flex-end;
-    padding: 1.5rem;
-}
-
-.search {
-    background-color: transparent;
-    border: 2px solid #121280;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-    width: 250px;
-}
-
-#main {
-    align-self: center;
-    margin-left: 45px;
-}
-
-.search::placeholder {
-    color: #7378c5;
-}
-
-#search:hover {
-    outline: none;
-    background-color: #22254b;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 100px;
-    padding-top: -20px;
-}
-
-header h1 {
-    color: #ff8623;
-    text-align: center;
-}
-
-#privacy-header {
-    color: #ff8623;
-    text-align: center;
-}
-
-.highlight {
-    color: orange;
-}
-
-.highlight:hover {
-    color: #ff8623;
-}
-
-.highlight2 {
-    color: orange;
-}
-
-.highlight2:hover {
-    color: #ff8623;
-}
-
-.search:focus {
-    outline: none;
-    background-color: #22254b;
-}
-
-.about {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 130px;
-    border-radius: 8px;
-    z-index: 999;
-}
-
-.header2 {
-    text-align: center;
-    align-self: center;
-    margin-left: 500px;
-}
-
-.back-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 41px;
-    border-radius: 8px;
-    z-index: 999;
-}
-
-.movie-card {
-    display: flex;
-    background: #fff;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.movie-image {
-    width: 150px;
-    height: 225px;
-    background-size: cover;
-    background-position: center;
-}
-
-.tvSeries-info {
-    padding: 20px;
-    flex-grow: 1;
-}
-
-.green {
-    color: #4CAF50;
-}
-
-.orange {
-    color: #FF9800;
-}
-
-.red {
-    color: #ff0000;
-}
-
-#profileBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    width: 100px;
-    top: 0;
-    margin-left: 316px;
-    border-radius: 8px;
-}
-
-#profileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#mobileGoogleSignInBtn {
-    display: none;
-}
-
-#mobileProfileBtn {
-    display: none;
-}
-
-@media screen and (max-width: 900px) {
-    #mobileGoogleSignInBtn {
-        display: block;
-    }
-
-    #mobileProfileBtn {
-        display: block;
-    }
-}
-
-.back-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.movie {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-    height: 555px;
-}
-
-.tvSeries {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-    height: 555px;
-}
-
-.movie img, .tvSeries img {
-    height: 435px;
-    width: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-.movie .overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-    text-align: center;
-}
-
-.tvSeries .overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.tvSeries-info h3 {
-    margin: 0;
-}
-
-.tvSeries:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.tvSeries-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.tvSeries-info span.green {
-    color: rgb(39,189,39);
-}
-
-.movie-info span.green {
-    color: rgb(39,189,39);
-}
-
-.tvSeries-info span.orange {
-    color: orange;
-}
-
-.movie-info span.orange {
-    color: orange;
-}
-
-.tvSeries-info span.red {
-    color: rgb(189,42,42);
-}
-
-.movie-info span.red {
-    color: rgb(189,42,42);
-}
-
-.overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.movie:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.overview h4 {
-    margin-top: 0;
-}
-
-.genres {
-    align-self: center;
-    margin-left: 15px;
-    color: #ff8623;
-}
-
-#other1:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.circle-text {
-    font-size: 25px;
-    font-weight: bold;
-    dominant-baseline: middle;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.about:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-#my-heading1 {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-@keyframes fadeInUp {
-    0% {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-#my-heading {
-    margin-bottom: -25px;
-    opacity: 0;
-    animation: fadeInUp 1s ease forwards;
-}
-
-#my-heading a {
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.highlight {
-    display: inline-block;
-    opacity: 0;
-    animation: fadeInUp 1s ease forwards 0.5s;
-}
-
-#trivia-btn {
-    position: fixed;
-    bottom: 60px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#trivia-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.button2:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#discussions-btn {
-    position: fixed;
-    bottom: 100px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#discussions-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-of-the-day-btn {
-    position: fixed;
-    bottom: 140px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#loadMoreButton {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    color: white;
-    margin-top: 20px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#loadMoreButton:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-of-the-day-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-of-the-day-btn2 {
-    position: fixed;
-    bottom: 80px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-of-the-day-btn2:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#button-search {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#button-search:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.details-container {
-    display: flex;
-    height: calc(100% - 60px);
-    color: white;
-    overflow-y: auto;
-    align-items: start;
-}
-
-.movie-left, .movie-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.actor-left, .actor-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    margin: 20px;
-}
-
-.director-left, .director-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    margin: 20px;
-}
-
-#actor-name {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    margin-top: -10px;
-}
-
-.movie-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.movie-left img {
-    height: auto;
-}
-
-.actor-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.director-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.movie-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-bottom: 50px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    height: 100%;
-}
-
-.actor-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-top: 70px;
-}
-
-.director-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-top: 40px;
-}
-
-.movie-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-    margin-right: 5px;
-}
-
-.movie-link:hover {
-    color: #ff8623;
-}
-
-.movie-image {
-    width: 100%;
-    height: auto;
-    border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-}
-
-@media (max-width: 768px) {
-    .movie-image {
-        height: auto;
-    }
-    #actor-image {
-        height: auto;
-    }
-}
-
-.movie-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.actor-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#rating {
-    color: inherit;
-}
-
-#rating:hover {
-    color: #ff8623;
-}
-
-#metacritics {
-    color: inherit;
-}
-
-#metacritics:hover {
-    color: #ff8623;
-}
-
-.director-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.adult-indicator {
-    color: red;
-    font-weight: bold;
-}
-
-.general-indicator {
-    color: green;
-    font-weight: bold;
-}
-
-.movie-description {
-    font-size: 1rem;
-    color: white;
-    width: 100%;
-}
-
-.companies-section {
-    margin-top: 20px;
-}
-
-.companies-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.company-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-@media (max-width: 768px) {
-    .company-item {
-        max-width: 125px;
-    }
-}
-
-.company-logo {
-    max-width: 100px;
-    max-height: 75px;
-    height: auto;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.company-item:hover {
-    transform: scale(1.07);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.company-details {
-    width: 100%;
-}
-
-.company-name {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-    white-space: normal;
-    text-align: center;
-}
-
-.actor-description {
-    font-size: 1rem;
-    color: white;
-    transform: translateY(10%);
-}
-
-.director-description {
-    font-size: 1rem;
-    color: white;
-    transform: translateY(10%);
-}
-
-.streaming-logo {
-    display: inline-flex;
-    align-items: flex-end;
-    vertical-align: bottom;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.streaming-logo img {
-    width: 50px;
-    margin-left: 10px;
-    transition: transform 0.3s ease;
-}
-
-.streaming-logo:hover {
-    transform: scale(1.1);
-    cursor: pointer;
-}
-
-.movie-rating {
-    margin-top: 100px;
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#user-ratings {
-    color: inherit;
-}
-
-#user-ratings:hover {
-    color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-#userRatings {
-    color: inherit;
-}
-
-#userRatings:hover {
-    color: #ff8623;
-}
-
-#githubLink {
-    color: white !important;
-}
-
-#githubLink1 {
-    color: black !important;
-}
-
-#githubLink1:hover {
-    color: #ff8623 !important;
-    transition: 0.1s ease-in;
-}
-
-#githubLink2 {
-    color: white !important;
-}
-
-#githubLink2: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;
-}
-
-.modal-overlay {
-    display: none;
-    position: fixed;
-    z-index: 100000000002;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0,0,0);
-    background-color: rgba(0,0,0,0.4);
-    justify-content: center;
-    align-items: center;
-}
-
-.modal-visible {
-    display: flex !important;
-}
-
-.pin-btn {
-    color: #ff8623;
-}
-
-.pin-btn:hover {
-    color: #c45c00;
-}
-
-.pin-btn.pinned {
-    color: #7378c5;
-}
-
-.spinner {
-    border: 4px solid #000;
-    border-radius: 50%;
-    border-top: 5px solid #ff8623;
-    width: 100px;
-    height: 100px;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-#githubLink:hover {
-    color: #ff8623 !important;
-    transition: 0.1s ease-in;
-}
-
-#imdbRating, #rtRating {
-    text-decoration: none;
-    color: inherit;
-    font-size: 2.5rem;
-    font-weight: bold;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#imdbRating:hover {
-    color: #ff8623;
-}
-
-#rtRating:hover {
-    color: #ff8623;
-}
-
-#movie-rating h2:hover {
-    color: initial;
-}
-
-h2 {
-    font-size: 1.74rem;
-}
-
-h2:hover {
-    color: orange;
-    transition: 0.1s linear;
-}
-
-p {
-    color: white;
-}
-
-.similar-movies-container h3 {
-    color: #E0E0E0;
-}
-
-.similar-movies span:hover {
-    text-decoration: none;
-    opacity: 0.8;
-    color: #ff8623;
-}
-
-.movie-details-body {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: repeat;
-}
-
-.movie-details-body2 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-position: center;
-    height: 100vh;
-    background-size: auto;
-    background-repeat: repeat;
-}
-
-.movie-details-body3 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-}
-
-.movie-details-body4 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-}
-
-.favorites-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 219px;
-    border-radius: 8px;
-    padding-left: 10px;
-    padding-right: 10px;
-    box-sizing: border-box;
-    z-index: 999;
-    max-width: 95px;
-}
-
-#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;
-}
-
-#searchContainer {
-    position: relative;
-    display: inline-block;
-}
-
-#averageDisplays {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 20px;
-    width: 100%;
-}
-
-.progress-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 20px;
-    flex: 1;
-    text-align: center;
-}
-
-.progress-ring {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.progress-ring__circle {
-    fill: transparent;
-    stroke-width: 10;
-    stroke: #fff;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-}
-
-.progress-ring__progress {
-    fill: transparent;
-    stroke-width: 10;
-    stroke: var(--progress-color);
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-    transition: stroke-dashoffset 0.6s ease-out;
-}
-
-.progress-ring__text {
-    font-size: 20px;
-    dominant-baseline: middle;
-    text-anchor: middle;
-    opacity: 0;
-    transition: opacity 0.6s ease-out;
-}
-
-strong {
-    font-weight: bold;
-}
-
-.favorites-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#favorite-btn {
-    background-color: rgba(255, 255, 255, 0.05);
-    color: grey;
-    margin-left: 10px;
-    border-radius: 8px;
-    width: 40px;
-    box-shadow: none;
-    position: relative;
-    cursor: pointer;
-}
-
-#favorite-btn:hover {
-    background-color: #dcdcdc;
-}
-
-.tooltip-text {
-    visibility: hidden;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    bottom: 125%;
-    left: 10%;
-    margin-left: -90px;
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.tooltip-text::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #555 transparent transparent transparent;
-}
-
-.title-favorites-container {
-    display: flex;
-    align-items: center;
-    overflow: visible;
-}
-
-#favorite-btn.favorited {
-    color: red;
-}
-
-#favorites-main {
-    margin-left: 15px;
-}
-
-#favorite-btn:hover::after {
-    content: "Favorite / Unfavorite";
-    position: absolute;
-    top: -45px;
-    left: 50%;
-    width: 55px;
-    transform: translateX(-70%);
-    background-color: #232323;
-    color: white;
-    padding: 5px;
-    border-radius: 5px;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 10;
-}
-
-#main2 {
-    text-align: center;
-    max-width: 800px;
-    margin: auto;
-    padding: 20px;
-    margin-bottom: 300px;
-}
-
-#main2 h2, #main2 h3 {
-    color: #ff8623;
-    margin-bottom: 20px;
-}
-
-#aboutHeader {
-    margin-top: -25px;
-}
-
-#main2 p, #main2 ul, #main2 li {
-    text-align: left;
-    margin: auto;
-    max-width: 800px;
-    color: #ff8623;
-}
-
-#main2 ul {
-    list-style: none;
-    padding: 0;
-}
-
-#main2 li {
-    background-color: #f0f0f0;
-    border: 1px solid #ddd;
-    margin-top: 10px;
-    padding: 10px;
-    border-radius: 5px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: black;
-    align-items: center;
-}
-
-#main2 li:hover {
-    background-color: #e6e6e6;
-}
-
-#main2 a {
-    color: #7378c5;
-    text-decoration: none;
-}
-
-#main2 a:hover {
-    text-decoration: underline;
-}
-
-.app-link {
-    margin-top: 20px;
-    text-align: center;
-}
-
-.app-link button {
-    background-color: #f0f0f0;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 10px 15px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: black;
-    cursor: pointer;
-    font-size: 16px;
-    display: block;
-    width: auto;
-    margin: 10px auto;
-}
-
-.app-btn {
-    background-color: #7378c5;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 10px 15px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: white;
-    cursor: pointer;
-    font: inherit;
-    display: block;
-    width: auto;
-    margin: 10px auto;
-    transition: 0.1s ease-in;
-}
-
-.clock {
-    text-align: center;
-    font-size: 20px;
-    color: #ff8623;
-}
-
-.clock:hover {
-    color: #ff8623;
-}
-
-#time-label {
-    color: #ff8623;
-}
-
-#time-label:hover {
-    color: #ff8623;
-}
-
-.app-btn:hover {
-    background-color: #ff8623;
-}
-
-.app-link button:hover {
-    background-color: #e6e6e6;
-}
-
-.app-link p {
-    margin-top: 10px;
-    color: white;
-}
-
-.side-nav {
-    position: fixed;
-    left: -250px;
-    top: 0;
-    width: 250px;
-    height: 100%;
-    background-color: #373b69;
-    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
-    overflow-y: auto;
-    transition: left 0.39s;
-    z-index: 1000;
-}
-
-.side-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.side-nav ul li {
-    padding: 15px 20px;
-    border-radius: 8px;
-}
-
-.side-nav ul li a {
-    color: white;
-    text-decoration: none;
-    display: block;
-    padding-left: 5px;
-}
-
-.side-nav ul li a:hover {
-    background-color: #ff8623;
-    border-radius: 8px;
-}
-
-.nav-toggle {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    cursor: pointer;
-    font-size: 1.5rem;
-    top: 5px;
-    left: 15px;
-    border-radius: 8px;
-    padding: 3.5px;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    display: flex;
-    position: fixed;
-    justify-content: center;
-    align-items: center;
-    padding-left: 4.25px;
-}
-
-.nav-toggle i {
-    line-height: inherit;
-}
-
-.nav-toggle:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#button-container {
-    text-align: center;
-}
-
-#button-remove {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#button-remove:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#trailerButton {
-    color: #fff;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#trailerButton:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.trailer-button {
-    display: block;
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-    width: fit-content;
-    font-size: 1rem;
-}
-
-.trailer-button:hover {
-    background-color: #ff8623;
-}
-
-.cast-container {
-    margin-top: 20px;
-}
-
-.actor {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor:hover {
-    color: #0056b3;
-}
-
-.actor-item {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor-item:hover {
-    color: #0056b3;
-}
-
-.cast-container {
-    margin-top: 20px;
-}
-
-.actor-link {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor-link:hover {
-    color: #0056b3;
-}
-
-.cast-list {
-    white-space: nowrap;
-    overflow-x: auto;
-    margin-top: 10px;
-}
-
-.actor-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.watchlist-buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 60px;
-    margin-left: 30px;
-}
-
-.watchlist-buttons-container button {
-    margin: 0 10px;
-    background-color: #7378c5;
-    font: inherit;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.1s ease-in;
-}
-
-#button {
-    margin: 0 10px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.1s ease-in;
-}
-
-#button:hover {
-    background-color: #ff8623;
-}
-
-.watchlist-buttons-container button:hover {
-    background-color: #ff8623;
-}
-
-#search-container {
-    display: none;
-    background-color: rgba(255, 255, 255, 0.1);
-    padding: 15px;
-    border-radius: 8px;
-    color: white;
-    margin: 10px;
-}
-
-#movie-match-container1 {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0;
-    padding: 0;
-    top: 0;
-    margin: 0;
-}
-
-.checkbox-container {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.checkbox-container label {
-    margin-top: 6px;
-}
-
-.active-category {
-    background-color: #ff8623;
-    color: white;
-}
-
-.nav-button {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.nav-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#menu-btn {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-    font-size: 14px;
-    z-index: 1000000002 !important;
-}
-
-#menu-btn i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-#menu-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#settings-container {
-    background-color: rgba(255, 255, 255, 0.1);
-    padding: 15px;
-    border-radius: 32px;
-    color: white;
-    margin: 5px auto;
-    max-width: 500px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-@media (max-width: 700px) {
-    #settings-container {
-        max-width: calc(100% - 10px);
-        margin: 10px 10px;
-    }
-}
-
-#chat-button,
-#settings-btn,
-#movie-of-the-day-btn,
-#movie-match-btn,
-#movie-match-btn3,
-#movie-timeline-btn,
-#discussions-btn,
-#trivia-btn,
-#back-to-top-btn {
-    transition: transform 0.5s ease, opacity 0.5s ease;
-    transform: translateY(20px);
-    opacity: 0;
-    display: none;
-}
-
-@media (min-width: 768px) {
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #movie-match-btn3,
-    #trivia-btn,
-    #back-to-top-btn {
-        position: fixed;
-        right: 10px;
-        z-index: 1000;
-    }
-
-    #menu-btn {
-        display: block;
-    }
-}
-
-.mobile-bottom-bar {
-    display: none;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    background-color: #7378c5;
-    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
-    justify-content: space-around;
-    align-items: center;
-    z-index: 100000222;
-    transition: transform 0.09s ease-in-out;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-}
-
-.hide-bar {
-    transform: translateY(100%);
-}
-
-.mobile-bottom-bar a {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    text-align: center;
-    color: white;
-    text-decoration: none;
-    padding: 6px 0;
-    width: 15%;
-}
-
-.mobile-bottom-bar a:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.mobile-bottom-bar i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-.mobile-bottom-bar span {
-    display: block;
-    font-size: 10px;
-    color: #ecf0f1;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #trivia-btn,
-    #menu-btn,
-    #back-to-top-btn {
-        display: none;
-    }
-}
-
-.nav-button:disabled {
-    background-color: #b5b5b5;
-    cursor: not-allowed;
-}
-
-.search-users-container {
-    text-align: center;
-    margin: 20px auto;
-    background-color: rgba(55, 59, 105, 0.8);
-    padding: 15px;
-    border-radius: 8px;
-    max-width: 500px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    color: white;
-    font: inherit;
-}
-
-.search-users-container input[type="text"] {
-    width: 70%;
-    padding: 10px;
-    margin-right: 10px;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-    font: inherit;
-}
-
-.search-users-container button {
-    padding: 10px 20px;
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    color: white;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    font: inherit;
-}
-
-.search-users-container button:hover {
-    background-color: #ff8623;
-}
-
-.search-results-container {
-    display: none;
-    background-color: rgba(211, 211, 211, 0.5);
-    max-width: 500px;
-    margin: 10px auto;
-    padding: 10px;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    text-align: left;
-}
-
-#viewMyProfileBtn {
-    display: block;
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 20px;
-    margin: 20px auto;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    font: inherit;
-}
-
-#viewMyProfileBtn:hover {
-    background-color: #ff8623;
-}
-
-.user-search-result {
-    background-color: rgba(55, 59, 105, 0.8);
-    margin: 10px auto;
-    padding: 10px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    color: white;
-    transition: background-color 0.3s ease;
-    height: 100px;
-    max-width: 400px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-}
-
-.user-search-result:hover {
-    background-color: #ff8623;
-}
-
-.user-search-result img {
-    width: auto;
-    height: 95%;
-    max-height: 100px;
-    margin-right: 10px;
-    border-radius: 8px;
-    object-fit: contain;
-}
-
-#userLink {
-    color: black;
-}
-
-#userLink:hover {
-    color: #ff710d;
-}
-
-#chat-button {
-    background-color: #7378c5;
-    bottom: 325px;
-    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);
-}
-
-#chat-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-.user-search-result div {
-    width: 67%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: left;
-}
-
-.user-search-result strong {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.user-search-result p {
-    margin: 0;
-    font-size: 0.9rem;
-}
-
-.pagination {
-    border-radius: 8px;
-    background-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-}
-
-@media (max-width: 767px) {
-    .genres + main + .pagination {
-        text-align: center;
-    }
-
-    .pagination {
-        position: relative;
-        width: calc(100% - 20px);
-        margin-top: 20px;
-    }
-}
-
-.page-button {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    margin: 2px;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    font: inherit;
-    font-size: 12.9px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-.page-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.page-button.active {
-    background-color: #4a4e8c;
-}
-
-.page-button:disabled {
-    background-color: #b5b5b5;
-    cursor: default;
-}
-
-#search-results-label {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-#search-results-label:hover {
-    color: #ff8623;
-}
-
-.category-buttons button {
-    background-color: #7378c5;
-    font: inherit;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    margin: 10px;
-    transition: 0.1s ease-in;
-}
-
-.category-buttons button:hover {
-    background-color: #534caf;
-}
-
-.watchlist {
-    background-color: rgba(255, 255, 255, 0.1);
-    margin: 10px;
-    padding: 15px;
-    border-radius: 8px;
-    color: white;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-}
-
-.watchlist-title {
-    font-size: 1.5rem;
-    color: #ff8623;
-    text-align: center;
-}
-
-.watchlist-description {
-    font-size: 1rem;
-    margin-bottom: 10px;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.modal-content {
-    background-color: #373b69;
-    margin: 15% auto;
-    padding: 20px;
-    border-radius: 8px;
-    width: 50%;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-}
-
-.modal-content h2 {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.modal-content label {
-    color: #fff;
-    margin-bottom: 10px;
-    display: block;
-}
-
-.modal-content input[type="text"],
-.modal-content textarea {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 5px;
-    border: 1px solid #7378c5;
-    background-color: #22254b;
-    color: #fff;
-}
-
-.modal-content button {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font: inherit;
-    display: block;
-    margin: 10px auto;
-    transition: background-color 0.3s ease;
-}
-
-.modal-content select {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 5px;
-    border: 1px solid #7378c5;
-    background-color: #22254b;
-    color: #fff;
-}
-
-.modal-content button:hover {
-    background-color: #ff8623;
-}
-
-.modal-content {
-    position: relative;
-    background-color: #373b69;
-    margin: 15% auto;
-    padding: 20px;
-    border-radius: 8px;
-    width: 50%;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-}
-
-.modal-content h2 {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.modal-content .close-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    color: #fff;
-    cursor: pointer;
-}
-
-.modal-content label {
-    color: #fff;
-    margin-bottom: 10px;
-    display: block;
-}
-
-#subheading:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#aboutHeader:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#profileLink {
-    color: white !important;
-    text-decoration: underline !important;
-}
-
-#profileLink:hover {
-    color: #ff8623 !important;
-    transition: 0.1s linear;
-}
-
-textarea {
-    resize: none;
-}
-
-.close-button {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close-button:hover {
-    color: #ff8623;
-}
-
-.close-button:hover,
-.close-button:focus {
-    color: #ff8623;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.actor-link:hover {
-    color: #ff8623;
-}
-
-.genres {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-#discussion-input {
-    background-color: transparent;
-    border: 2px solid #ff8623;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-}
-
-#discussion-input:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#post-btn {
-    background-color: #ff8623;
-    font: inherit;
-}
-
-#post-btn:hover {
-    background-color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-ol li:hover {
-    color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-#chatbotContainer {
-    width: 95%;
-    max-width: 600px;
-    background-color: rgba(0, 0, 0, 0.7);
-    margin: 20px auto;
-    border-radius: 8px;
-    padding: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-#chatbotHeader {
-    background-color: #ff8623;
-    color: white;
-    padding: 10px;
-    text-align: center;
-    border-radius: 8px;
-    margin-top: 10px;
-}
-
-#chatbotBody {
-    overflow-y: auto;
-    max-height: 300px;
-    padding: 10px;
-    border-radius: 8px;
-    color: white;
-    word-wrap: break-word;
-    box-sizing: border-box;
-    margin-top: 10px;
-    border: 1px solid #ff8623;
-}
-
-#sendButton {
-    padding: 10px;
-    margin-top: 10px;
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: 1rem;
-    color: white;
-    background-color: #ff8623;
-    border: none;
-    cursor: pointer;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-#sendButton:hover {
-    background-color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-#chatbotInput {
-    width: 100%;
-    padding: 10px 20px;
-    border: 1px solid #ff8623;
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: 1rem;
-    background-color: transparent;
-    color: white;
-    margin-top: 10px;
-    box-sizing: border-box;
-}
-
-.highlight1 {
-    color: orange;
-}
-
-#chatbotInput:focus {
-    outline: none;
-}
-
-#bot-header {
-    text-align: center;
-    width: 100%;
-}
-
-#chatbotBody > div {
-    margin-bottom: 10px;
-    padding: 5px 10px;
-    border-radius: 5px;
-}
-
-@media (max-width: 705px) {
-    #search-title,
-    #alt-title {
-        display: none;
-    }
-}
-
-@media (max-height: 930px) {
-    #search-title,
-    #alt-title {
-        display: none;
-    }
-}
-
-#chatbotBody > div[text-align="right"] {
-    background-color: #ff8623;
-    align-self: flex-end;
-}
-
-#chatbotBody > div[text-align="left"] {
-    background-color: #7378c5;
-    align-self: flex-start;
-}
-
-@media (max-width: 767px) {
-    #chatbotContainer {
-        top: 56.1%
-    }
-}
-
-#change-director-btn {
-    padding: 5px 10px;
-    cursor: pointer;
-    border: none;
-    background-color: #7378c5;
-    font: inherit;
-    color: #000000;
-    border-radius: 8px;
-}
-
-#movie-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#movie-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#actor-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#actor-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#director-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#director-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#company-logo {
-    z-index: 100000000;
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#rating-link {
-    color: white;
-}
-
-#rating-link:hover {
-    color: #ff8623;
-}
-
-#company-logo:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#change-director-btn:hover {
-    background-color: #ff8623;
-}
-
-#trailerContainer {
-    width: 560px;
-    height: 315px;
-    overflow: hidden;
-    transition: max-height 0.5s ease;
-}
-
-#removeBtn {
-    color: white;
-}
-
-#removeBtn:hover {
-    color: #ff8623;
-}
-
-.director-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.director-link:hover {
-    color: #ff8623;
-}
-
-@media (max-width: 982px) {
-    #local-time {
-        display: none;
-    }
-}
-
-#custom-bg-upload {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    border: 2px solid #7378c5;
-    background-color: #22254b;
-    color: white;
-    font-size: 16px;
-    margin-bottom: 10px;
-    cursor: pointer;
-}
-
-#movie-details-container {
-    margin-top: 10px;
-}
-
-#custom-bg-name {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    border: 2px solid #7378c5;
-    background-color: #22254b;
-    color: white;
-    font-size: 16px;
-    margin-bottom: 10px;
-}
-
-#upload-bg-btn {
-    background-color: #ff8623;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    font-size: 1rem;
-    border-radius: 8px;
-    cursor: pointer;
-    margin: 20px auto;
-    display: block;
-}
-
-.chart-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    padding: 20px;
-    justify-content: center;
-}
-
-.chart-box {
-    background-color: rgba(255, 255, 255, 0.5);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    padding: 20px;
-    width: 100%;
-    max-width: 600px;
-    height: 400px;
-    margin: 20px auto;
-    opacity: 1;
-}
-
-canvas {
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-}
-
-@media screen and (max-width: 900px) {
-    .chart-container {
-        flex-direction: column;
-    }
-
-    .chart-box {
-        height: auto;
-    }
-}
-
-#ratingImdb {
-    color: #ff710d;
-    font-size: 17px;
-}
-
-#ratingImdb:hover {
-    color: #ff8623;
-}
-
-.chart-title {
-    text-align: center;
-    color: #ff710d;
-    margin-bottom: 15px;
-}
-
-#descriptionP {
-    margin-top: -10px;
-}
-
-#upload-bg-btn:hover {
-    background-color: #7378c5;
-    transition: background-color 0.3s ease;
-}
-
-#settings-btn {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#settings-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-@media (max-width: 1000px) {
-    #comments-section {
-        margin-bottom: 210px;
-    }
-}
-
-#local-time {
-    transform: translateX(10%);
-    padding: 10px;
-    border-radius: 10px;
-    z-index: 10;
-}
-
-#mobileProfileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-@media (max-width: 800px) {
-    #my-heading {
-        margin-left: 0;
-    }
-
-    #movie-details-body3 {
-        background-image: url("https://movie-verse.com/images/universe-1.webp");
-        background-position: center;
-        height: 100vh;
-        background-size: auto;
-        background-repeat: repeat;
-        width: 100vw;
-    }
-
-    #profileBtn {
-        display: none;
-    }
-
-    #indexLink {
-        margin-bottom: -15px;
-    }
-
-    .back-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: -180px;
-        border-radius: 8px;
-    }
-
-    .about {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 0;
-        border-radius: 8px;
-    }
-
-    .favorites-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        width: 95px;
-        margin-left: 188px;
-        border-radius: 8px;
-        padding-left: 10px;
-        padding-right: 10px;
-        box-sizing: border-box;
-    }
-
-    #googleSignInBtn {
-        display: none;
-    }
-
-    .movie-details-body {
-        min-height: 100% !important;
-    }
-
-    .movie-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .actor-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .director-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .details-container {
-        flex-direction: column;
-    }
-
-    #movie-details-container {
-        margin-top: 15px;
-    }
-
-    .movie-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .actor-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .director-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .movie-left, .movie-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .actor-left, .actor-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .director-left, .director-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .movie-right {
-        margin-top: 0;
-        height: 100% !important;
-        overflow: visible;
-        margin-bottom: 5px;
-    }
-
-    #descriptionP {
-        margin-top: -100px;
-    }
-
-    .actor-right {
-        margin-top: -20px;
-        height: 100% !important;
-        overflow: visible;
-    }
-
-    .director-right {
-        margin-top: -20px;
-        height: 100% !important;
-        overflow: visible;
-    }
-
-    header {
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    main {
-        margin-bottom: -40px;
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    #clear-search-btn {
-        margin-top: 5px;
-    }
-
-    .watchlist-buttons-container {
-        margin-left: -3px;
-    }
-
-}
-
-.year-input-container {
-    margin: 20px;
-}
-
-.year-input {
-    width: 150px;
-    padding: 10px;
-    margin: 5px;
-    border-radius: 5px;
-    border: 1px solid #ddd;
-}
-
-#load-movies {
-    padding: 10px 10px;
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#load-movies:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.movie-card {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-}
-
-#form {
-    margin-top: 20px;
-}
-
-#form1 {
-    margin-top: 5px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.movie-card img {
-    width: 100%;
-}
-
-.movie-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-    padding-top: 14px;
-    flex-grow: 1;
-}
-
-.tvSeries-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-}
-
-.movie-info h3 {
-    margin: 0;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.timeline-container {
-    margin: 20px auto;
-    background-color: rgba(255,255,255,0.1);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    padding: 20px;
-    width: calc(100% - 24px);
-    border-radius: 16px;
-    margin-top: 50px;
-    text-align: center;
-}
-
-#movie-timeline-btn {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    cursor: pointer;
-}
-
-#movie-timeline-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movies-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-    flex-direction: column;
-}
-
-#tvseries-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-    flex-direction: column;
-}
-
-#tvseries-container .movie-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-#movies-container1 {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-#movies-container .movie-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.movies-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 20px;
-}
-
-.center-container {
-    text-align: center;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-}
-
-.center-container1 {
-    text-align: center;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-}
-
-#load-movies {
-    cursor: pointer;
-    font: inherit;
-}
-
-#select-text {
-    margin-top: 30px;
-    color: #ff8623;
-}
-
-#select-text:hover {
-    color: #ff8623;
-}
-
-#clear-search-btn {
-    background-color: #7378c5;
-    color: black;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-left: 10px;
-    font: inherit;
-    margin-right: 20px;
-}
-
-#clear-search-btn:hover {
-    background-color: #ff8623;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-    body {
-        background-size: auto;
-        background-repeat: repeat;
-    }
-}
-
-#search-title {
-    color: #ff8623;
-    text-align: center;
-    font-size: 1.74rem;
-    margin-bottom: 20px;
-}
-
-#search-title:hover {
-    color: #ff8623;
-}
-
-#search-title1 {
-    color: #ff8623;
-    text-align: center;
-    font-size: 1.74rem;
-    margin-bottom: 20px;
-}
-
-#search-title1:hover {
-    color: #ff8623;
-}
-
-#movie-match-main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-    margin-top: 60px;
-    padding: 20px;
-    width: 100%;
-    margin-bottom: 300px;
-}
-
-.profile-container {
-    text-align: center;
-    margin-top: 20px;
-}
-
-.profile-image-container img {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.profile-info p {
-    margin: 10px 0;
-}
-
-body {
-    overflow-x: hidden;
-    max-width: 100%;
-}
-
-#googleSignInBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 420px;
-    border-radius: 8px;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-.mobile-sign-in-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 12px;
-    margin-bottom: 10px;
-}
-
-#mobileGoogleSignInBtn {
-    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;
-}
-
-#mobileProfileBtn {
-    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;
-}
-
-#mobileGoogleSignInBtn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-.movie-match-container {
-    max-width: 500px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 15px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-#movie-match-form {
-    background-color: transparent;
-    border: 2px solid #7378c5;
-    border-radius: 50px;
-    padding: 20px;
-    max-width: 500px;
-    margin: auto;
-}
-
-#movie-match-form label, #movie-match-form select, #movie-match-form input[type="submit"] {
-    display: block;
-    width: 100%;
-    margin-bottom: 10px;
-    font-family: "Poppins", sans-serif;
-    color: #fff;
-}
-
-#movie-match-form label {
-    margin-bottom: 5px;
-    font-size: 1rem;
-}
-
-#movie-match-form select {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-match-form input[type="submit"] {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 25px;
-    border: none;
-    cursor: pointer;
-    color: white;
-    padding: 10px 15px;
-    margin-top: 30px;
-}
-
-#movie-match-form input[type="submit"]:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#movie-match-btn2 {
-    position: fixed;
-    bottom: 115px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn2:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-match-btn3 {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn3:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-match-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.company-left, .company-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    text-align: center;
-}
-
-.company-left {
-    width: 33.33%;
-}
-
-.company-right {
-    width: 66.67%;
-}
-
-#company-movies-list {
-    text-align: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding: 10px;
-}
-
-#company-movies-list span {
-    margin: 0;
-}
-
-.company-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.company-link:hover {
-    color: #ff8623;
-}
-
-.title-logo-container {
-    text-align: center;
-    align-items: center;
-    margin-bottom: 20px;
-}
-
-.company-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.company-description {
-    margin-top: 20px;
-}
-
-.company-description, #company-headquarters, #company-country, #company-website {
-    color: white;
-    margin-bottom: 10px;
-}
-
-#company-website:hover {
-    color: #ff8623;
-}
-
-.movies-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-
-.movies-list a {
-    color: white;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.movies-list a:hover {
-    color: purple;
-}
-
-@media (max-width: 800px) {
-    .company-details-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .company-left {
-        width: 100%;
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .company-right {
-        width: 100%;
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .company-left img {
-        max-width: 100%;
-        height: auto;
-    }
-}
-
-#button-clear {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 15px;
-    font: inherit;
-    cursor: pointer;
-    margin-left: 10px;
-    color: #000000;
-    margin-right: 40px;
-}
-
-#rating-value:hover {
-    color: #ff8623;
-}
-
-#button-clear:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.rating {
-    display: flex;
-    justify-content: flex-end;
-    direction: rtl;
-    color: grey;
-    font-size: 20px;
-}
-
-.rating .star {
-    color: white;
-    cursor: pointer;
-    transition: color 200ms;
-}
-
-.rating .star:hover,
-.rating .star:hover ~ .star {
-    color: gold;
-}
-
-@keyframes shake {
-    0% { transform: translateX(0); }
-    20% { transform: translateX(-5px); }
-    40% { transform: translateX(5px); }
-    60% { transform: translateX(-5px); }
-    80% { transform: translateX(5px); }
-    100% { transform: translateX(0); }
-}
-
-.shake-animation {
-    animation: shake 0.5s ease-in-out 5;
-}
-
-.search-results {
-    display: flex;
-    flex-direction: column;
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-#form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.search-container {
-    display: flex;
-    align-items: center;
-}
-
-#search-results {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-.search-result-card {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #7378c5;
-    margin-bottom: 2px;
-    margin-top: 5px;
-    width: 300px;
-    color: #212121;
-}
-
-.search-result-card:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.buttons-container button {
-    padding-left: 20px;
-}
-
-#clear-search {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    padding: 5px 10px;
-    margin-top: 10px;
-    margin-left: 20px;
-}
-
-#clear-search:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#view-all-results {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 5px 10px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    margin-top: 10px;
-}
-
-#view-all-results:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.result-image {
-    width: 64px;
-    height: 96px;
-    object-fit: cover;
-    border-radius: 4px;
-}
-
-.result-details {
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-}
-
-.result-name {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.result-type {
-    font-size: 14px;
-    font-style: italic;
-    color: #212121;
-}
-
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-    color: white;
-    transition: 0.3s ease-in;
-}
-
-#footer:hover {
-    cursor: pointer;
-}
-
-.notification-btn {
-    position: fixed;
-    top: 5px;
-    right: 20px;
-    z-index: 100;
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    cursor: pointer;
-    padding: 9px;
-    border-radius: 8px;
-    transition: 0.1s ease-in;
-}
-
-#closeModalButton {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 16px;
-    text-align: center;
-    transition: 0.1s ease-in;
-}
-
-#closeModalButton:hover {
-    background-color: #ff8623;
-}
-
-#closeModalButton {
-    margin: 10px auto;
-    display: block;
-}
-
-.notification-btn:hover {
-    background-color: #ff8623;
-}
-
-.notification-modal {
-    position: fixed;
-    top: 50px;
-    right: 20px;
-    background-color: #7378c5;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    padding: 20px;
-    width: 300px;
-    z-index: 1002;
-    color: white;
-}
-
-@media (max-width: 900px) {
-    .notification-modal {
-        right: 12.5px;
-    }
-
-    .notification-btn {
-        right: 12.5px;
-    }
-}
-
-.notification-link:hover {
-    color: #ff8623 !important;
-}
-
-.notification-modal h4 {
-    margin: 0;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
-}
-
-.notification-modal ul {
-    list-style: none;
-    padding: 0;
-    margin-top: 10px;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.notification-modal ul li {
-    padding: 10px 0;
-    border-bottom: 1px solid #eee;
-}
-
-#comments-section {
-    background-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    border-radius: 10px;
-    padding: 20px;
-    margin: 20px 0;
-    max-width: calc(100% - 20px);
-}
-
-@keyframes dropIn {
-    0% {
-        opacity: 0;
-        transform: translateY(-50px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-#my-heading {
-    margin-bottom: -25px;
-    opacity: 0;
-    animation: dropIn 1s ease forwards;
-}
-
-#my-heading a {
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.highlight {
-    display: inline-block;
-    opacity: 0;
-    animation: dropIn 1s ease forwards 1s;
-}
-
-#local-time {
-    cursor: pointer;
-    opacity: 0;
-    animation: dropIn 1s ease forwards 1.5s;
-}
-
-#local-time p,
-#local-time div {
-    opacity: 0;
-    animation: dropIn 1s ease forwards 2s;
-}
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/trivia.css b/MovieVerse-Mobile/platforms/ios/www/css/trivia.css
deleted file mode 100644
index 6a40c7c3..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/css/trivia.css
+++ /dev/null
@@ -1,1157 +0,0 @@
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-}
-
-#footerP {
-    color: white !important;
-}
-
-#footerP:hover {
-    transition: 0.1s ease-in;
-    color: #ff8623 !important;
-}
-
-@media (max-width: 900px) {
-    #local-time {
-        display: none;
-    }
-}
-
-body {
-    color: #ff903a;
-    font-family: "Poppins", sans-serif;
-    margin: 0;
-    align-content: center;
-    text-align: center;
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    overflow-x: hidden;
-}
-
-html {
-    scroll-behavior: smooth;
-    overflow-x: hidden;
-}
-
-#profileBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    width: 100px;
-    top: 0;
-    margin-left: 316px;
-    border-radius: 8px;
-}
-
-#profileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-results {
-    display: flex;
-    flex-direction: column;
-    max-width: 600px;
-    margin: 0 auto;
-    align-items: center;
-}
-
-#form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.search-container {
-    display: flex;
-    align-items: center;
-}
-
-.search-result-card {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #7378c5;
-    margin: 0;
-    margin-bottom: 2px;
-    margin-top: 5px;
-    width: 300px;
-    color: #212121;
-}
-
-.search-result-card:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-.buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.buttons-container button {
-    padding-left: 20px;
-}
-
-#clear-search {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    padding: 5px 10px;
-    margin-top: 10px;
-    margin-left: 20px;
-}
-
-#clear-search:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#view-all-results {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 5px 10px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    margin-top: 10px;
-}
-
-#view-all-results:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.result-image {
-    width: 64px;
-    height: 96px;
-    object-fit: cover;
-    border-radius: 4px;
-}
-
-.result-details {
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-}
-
-.result-name {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.result-type {
-    font-size: 14px;
-    font-style: italic;
-    color: #212121;
-}
-
-#googleSignInBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 420px;
-    border-radius: 8px;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-#googleSignInBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-}
-
-#submit {
-    background-color: #7378c5;
-    font: inherit;
-    margin-bottom: 39px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#submit:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-#regenerate-questions {
-    background-color: #7378c5;
-    font: inherit;
-    margin-bottom: 39px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#regenerate-questions:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-timeline-btn {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-timeline-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-of-the-day-btn {
-    position: fixed;
-    bottom: 140px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-of-the-day-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#discussions-btn {
-    position: fixed;
-    bottom: 100px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#discussions-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-p {
-    text-align: center;
-    color: #ff8623;
-}
-
-.highlight:hover {
-    color: #ff8623;
-}
-
-.button2 {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    right: 18px;
-    position: absolute;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-.main2 {
-    text-align: center;
-    color: orange;
-    scroll-behavior: smooth;
-}
-
-.main2 p {
-    color: orange;
-}
-
-header {
-    background-color: transparent;
-    display: flex;
-    justify-content: flex-end;
-    padding: 1.5rem;
-}
-
-.search {
-    background-color: transparent;
-    border: 2px solid #121280;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-    width: 400px;
-}
-
-#main {
-    align-self: center;
-}
-
-.search::placeholder {
-    color: #7378c5;
-}
-
-#search:hover {
-    outline: none;
-    background-color: #22254b;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 100px;
-    padding-top: -20px;
-}
-
-header h1 {
-    color: #ff8623;
-    text-align: center;
-}
-
-.highlight {
-    color: orange;
-}
-
-.search:focus {
-    outline: none;
-    background-color: #22254b;
-}
-
-.about {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 130px;
-    border-radius: 8px;
-}
-
-.header2 {
-    text-align: center;
-    align-self: center;
-    margin-left: 500px;
-}
-
-.back-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 41px;
-    border-radius: 8px;
-}
-
-.back-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.movie {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-}
-
-.movie img {
-    width: 100%;
-}
-
-.movie-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-}
-
-.movie-info h3 {
-    margin: 0;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.movie-info span.green {
-    color: rgb(39,189,39);
-}
-
-.movie-info span.orange {
-    color: orange;
-}
-
-.movie-info span.red {
-    color: rgb(189,42,42);
-}
-
-.overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.movie:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.overview h4 {
-    margin-top: 0;
-}
-
-.genres {
-    align-self: center;
-    margin-left: 15px;
-    color: #ff8623;
-}
-
-#other1:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#movie-match-btn3 {
-    position: fixed;
-    bottom: 220px;
-    right: 20px;
-    background-color: #7378c5;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-}
-
-#movie-match-btn3:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.about:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-.modal-content {
-    background-color: #7378c5;
-    margin: 15% auto;
-    padding: 20px;
-    width: 80%;
-    max-width: 450px;
-    text-align: center;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    border-radius: 8px;
-}
-
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 10px;
-}
-
-.modal-content {
-    text-align: center;
-}
-
-.close-button {
-    cursor: pointer;
-    position: relative;
-    top: -2px;
-    font-size: 25px;
-    color: #aaa;
-    font-weight: bold;
-}
-
-.close-button:hover,
-.close-button:focus {
-    color: red;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.progress-circle {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    background: conic-gradient(green 0%, green var(--progress, 0%), red var(--progress, 0%), red 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin: 20px auto;
-    transition: stroke-dashoffset 0.5s ease-out;
-}
-
-.progress-circle::after {
-    content: '';
-    width: 130px;
-    height: 130px;
-    background: white;
-    border-radius: 50%;
-    display: block;
-}
-
-#correct-answers {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 30px;
-    font-weight: bold;
-}
-
-#result-text {
-    text-align: center;
-    font-size: 20px;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-.favorites-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 219px;
-    border-radius: 8px;
-    padding-left: 10px;
-    padding-right: 10px;
-    box-sizing: border-box;
-}
-
-.favorites-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#favorite-btn {
-    background: transparent;
-    color: grey;
-    margin-left: 10px;
-    border-radius: 8px;
-    width: 40px;
-    box-shadow: none;
-    position: relative;
-    cursor: pointer;
-}
-
-#favorite-btn:hover {
-    background-color: #dcdcdc;
-}
-
-#button-search {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#button-search:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-#settings-btn {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#settings-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-#menu-btn {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-    font-size: 14px;
-}
-
-#menu-btn i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-#menu-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#chat-button {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#chat-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-
-#chat-button,
-#settings-btn,
-#movie-of-the-day-btn,
-#movie-match-btn,
-#movie-match-btn3,
-#movie-timeline-btn,
-#discussions-btn,
-#trivia-btn,
-#back-to-top-btn {
-    transition: transform 0.5s ease, opacity 0.5s ease;
-    transform: translateY(20px);
-    opacity: 0;
-    display: none;
-}
-
-@media (min-width: 768px) {
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #movie-match-btn3,
-    #trivia-btn,
-    #back-to-top-btn {
-        position: fixed;
-        right: 10px;
-        z-index: 1000;
-    }
-
-    #menu-btn {
-        display: block;
-    }
-}
-
-.mobile-bottom-bar {
-    display: none;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    background-color: #7378c5;
-    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
-    justify-content: space-around;
-    align-items: center;
-    z-index: 1000002;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-}
-
-.mobile-bottom-bar {
-    transition: transform 0.09s ease-in-out;
-}
-
-.hide-bar {
-    transform: translateY(100%);
-}
-
-.mobile-bottom-bar a {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    text-align: center;
-    color: white;
-    text-decoration: none;
-    padding: 3px 0;
-    width: 15%;
-}
-
-.mobile-bottom-bar a:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.mobile-bottom-bar i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-.mobile-bottom-bar span {
-    display: block;
-    font-size: 10px;
-    color: #ecf0f1;
-}
-
-#trivia-btn {
-    position: fixed;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #trivia-btn,
-    #menu-btn,
-    #back-to-top-btn {
-        display: none;
-    }
-}
-
-#trivia-label:hover {
-    color: #ff8623;
-}
-
-#trivia-label {
-    margin-top: 50px
-}
-
-.button-container {
-    display: flex;
-    justify-content: center;
-}
-
-#clear-search-btn {
-    display: block;
-    margin: 20px auto;
-    background-color: #7378c5;
-    color: black;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-left: 10px;
-    font: inherit;
-    margin-right: 20px;
-}
-
-#quiz-container {
-    background-color: rgba(255, 255, 255, 0.2);
-    padding: 20px;
-    border-radius: 10px;
-    max-width: calc(100% - 20px);
-    width: 600px;
-    margin: 10px auto;
-    box-sizing: border-box;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#quiz-form {
-    width: calc(100% - 20px);
-    margin: 10px auto;
-    box-sizing: border-box;
-    padding: 0 10px;
-}
-
-@media (max-width: 520px) {
-    #quiz-container, #quiz-form {
-        width: calc(100% - 20px);
-        margin: 10px auto;
-    }
-}
-
-.button {
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 20px;
-}
-
-#clear-search-btn:hover {
-    background-color: #ff8623;
-}
-
-.side-nav {
-    position: fixed;
-    left: -250px;
-    top: 0;
-    width: 250px;
-    height: 100%;
-    background-color: #373b69;
-    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
-    overflow-y: auto;
-    transition: left 0.39s;
-    z-index: 1000;
-}
-
-.side-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.side-nav ul li {
-    padding: 15px 20px;
-    border-radius: 8px;
-    text-align: left;
-}
-
-.side-nav ul li a {
-    color: white;
-    text-decoration: none;
-    display: block;
-    padding-left: 5px;
-}
-
-.side-nav ul li a:hover {
-    background-color: #ff8623;
-    border-radius: 8px;
-}
-
-.nav-toggle {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    cursor: pointer;
-    font-size: 1.5rem;
-    top: 5px;
-    left: 15px;
-    border-radius: 8px;
-    padding: 3.5px;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    display: flex;
-    position: fixed;
-    justify-content: center;
-    align-items: center;
-    padding-left: 4.25px;
-}
-
-.nav-toggle i {
-    line-height: inherit;
-}
-
-.nav-toggle:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#button-remove {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#button-remove:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-@media (max-width: 900px) {
-    #profileBtn {
-        display: none;
-    }
-}
-
-@media (max-width: 840px) {
-    #my-heading {
-        margin-left: 0;
-    }
-
-    .back-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: -180px;
-        border-radius: 8px;
-    }
-
-    .about {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 0;
-        border-radius: 8px;
-    }
-
-    .favorites-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 189px;
-        border-radius: 8px;
-        padding-left: 12px;
-        padding-right: 12px;
-        box-sizing: border-box;
-    }
-
-    #googleSignInBtn {
-        display: none;
-    }
-
-    header {
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    main {
-        margin-bottom: -40px;
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    #trivia-label {
-        margin-top: 60px;
-    }
-}
-
-#movie-match-btn2 {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/about.html b/MovieVerse-Mobile/platforms/ios/www/html/about.html
deleted file mode 100644
index 87048c73..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/about.html
+++ /dev/null
@@ -1,1286 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>About The MovieVerse - Your Ultimate Movie Guide</title>
-    <meta property="og:title" content="About The MovieVerse - Your Ultimate Movie Guide" />
-    <meta name="description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/about.html"/>
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#aboutHeader">About The MovieVerse</a></li>
-            <li><a href="#subheading1">Core Features</a></li>
-            <li><a href="#subheading2">Explore Our Other Apps</a></li>
-            <li><a href="#subheading">Our Vision</a></li>
-            <li><a href="#subheading3">Join The Journey</a></li>
-            <li><a href="#subheading4">Useful Links</a></li>
-            <li><a href="terms-of-service.html">Terms of Service</a></li>
-            <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-
-    <main id="main2" style="margin: 0 auto">
-        <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
-        <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
-        <div style="width: 100%">
-            <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
-        </div>
-
-        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
-        <h3 id="subheading1" style="cursor: pointer">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">
-            <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 specialized sections like Director's Spotlight and award-winning films.</li>
-            <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
-            <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Interactive Discussions and Trivia:</strong> Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.</li>
-            <li><i style="margin-right: 3px" class="fas fa-fire"></i> <strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.</li>
-            <li><i style="margin-right: 3px" class="fas fa-clock"></i> <strong>Movie Timeline:</strong> Select a period and explore a curated list of movies from that era, offering a unique way to experience the evolution of film over time.</li>
-            <li><i style="margin-right: 3px" class="fas fa-heart"></i> <strong>Movie Match/Recommendation:</strong> Find or get recommended a movie that matches your mood, genre, and time period, ensuring you always find the perfect movie to watch.</li>
-            <li><i style="margin-right: 3px" class="fas fa-info-circle"></i> <strong>Detailed Filmography Insights:</strong> Delve into the careers of your favorite <a id="githubLink1" href="director-details.html">directors</a>, <a id="githubLink1" href="actor-details.html">actors</a>, and <a id="githubLink1" href="company-details.html">companies</a> with dedicated pages detailing their filmography and impact on cinema.</li>
-            <li><i style="margin-right: 3px" class="fas fa-sign-in-alt"></i> <strong>Sign In/Sign Out:</strong> Sign in to your account to access your personalized movie recommendations, <a id="githubLink1" href="favorites.html">watch lists</a>, <a id="githubLink1" href="user-profile.html">profile</a>, and more.</li>
-            <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Watch Lists:</strong> Save movies to your watch lists and share them with your loved ones, ensuring you never miss out on a movie you want to watch. If you're signed in, your watch lists are <a id="githubLink1" href="favorites.html">accessible</a> across all your devices!</li>
-            <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Chat Functionality:</strong> Engage with fellow movie enthusiasts through our secure <a id="githubLink1" href="chat.html">chat</a> feature, where you can discuss and connect with like-minded MovieVerse individuals!</li>
-            <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Search Functionality:</strong> Use our extensive <a id="githubLink1" href="search.html">search</a> functionality to find movies, actors, directors, and TV series, ensuring you always find what you're looking for.</li>
-            <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
-            <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
-        </ul>
-
-        <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
-        <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
-
-        <ul style="align-content: center; color: white">
-            <li>
-                <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';" class="app-btn">The StickyNotes App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Embark on a culinary adventure with RecipeGenie, your go-to database for delightful recipes.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';" class="app-btn">The RecipeGenie Database</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Stay ahead of the weather with WeatherMate, your personal weather forecasting assistant.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';" class="app-btn">The WeatherMate App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Keep track of your tasks and boost productivity with the ToDo App, a straightforward task manager.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-ToDo-App/';" class="app-btn">The ToDo App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Plan and manage your events seamlessly with EventHorizon, your ultimate event organizer.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
-            </li>
-        </ul>
-
-        <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
-        <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
-        <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
-        <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
-        <br/>
-        <p style="color: white; text-align: center">Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of movies!</p>
-        <br/>
-        <p style="color: white; text-align: center">
-            <em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <strong><a style="color: #ff8623" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a></strong>.
-                <i style="margin-left: 3px" class="fab fa-github"></i>
-            </em>
-        </p>
-
-        <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
-        <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
-        <br/>
-        <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
-        <br/>
-        <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
-        <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
-        <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
-        <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
-        <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
-    </main>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
-        </a>
-    </footer>
-
-    <script>
-        document.getElementById('logo').addEventListener('click', function() {
-            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
-
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-
-        document.getElementById('logo').addEventListener('mouseover', function() {
-            this.style.cursor = 'pointer';
-            this.style.transform = 'scale(1.05)';
-            this.style.transition = '0.3s ease-in-out';
-        });
-
-        document.getElementById('logo').addEventListener('mouseout', function() {
-            this.style.transform = 'scale(1)';
-        });
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById("subheading1").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading2").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading2').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading3").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading3').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading4").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading4').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("aboutHeader").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('aboutHeader').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/actor-details.html b/MovieVerse-Mobile/platforms/ios/www/html/actor-details.html
deleted file mode 100644
index e96b40fe..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/actor-details.html
+++ /dev/null
@@ -1,808 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Actor Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html">
-    <meta property="og:title" content="Actor Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        #actor-details-container {
-            margin-top: 0;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #actor-details-container {
-                margin-top: 25px;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #actor-details-container {
-            margin-top: 25px;
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <main id="main" style="margin-left: 25px; height: 0"></main>
-
-    <div class="details-container" id="actor-details-container" style="margin-bottom: 70px;">
-        <!-- Left side for Actor Image -->
-        <div class="actor-left" style="overflow-y: hidden">
-            <h2 id="actor-name" class="actor-header"></h2>
-            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
-            <div style="height: 20px"></div>
-        </div>
-        <!-- Right side for Description and Info -->
-        <div class="actor-right" id="actor-description">
-            <!-- Actor details will be populated here -->
-        </div>
-    </div>
-
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script src="../js/actor-details.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('actor-image').addEventListener('click', function() {
-            const imageUrl = this.src.replace('w1280', 'original')
-            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/analytics.html b/MovieVerse-Mobile/platforms/ios/www/html/analytics.html
deleted file mode 100644
index 9b02e879..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/analytics.html
+++ /dev/null
@@ -1,910 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Database Analytics - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html">
-    <meta property="og:title" content="Database Analytics - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="https://movie-verse.com/MovieVerse-Frontend/css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("https://movie-verse.com/images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @keyframes fadeInUp {
-            0% {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: fadeInUp 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: fadeInUp 1s ease forwards 0.5s;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        @keyframes dropIn {
-            0% {
-                opacity: 0;
-                transform: translateY(-50px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: dropIn 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1s;
-        }
-        #local-time {
-            cursor: pointer;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1.5s;
-        }
-        #local-time p,
-        #local-time div {
-            opacity: 0;
-            animation: dropIn 1s ease forwards 2s;
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0" class="notranslate">
-            <h1 id="my-heading" style="margin-bottom: -10px">
-                The Mo<span class="highlight">vieV</span>erse
-            </h1>
-        </a>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="#chart1">Annual Releases</a></li>
-            <li><a href="#chart2">Genre Popularity</a></li>
-            <li><a href="#chart3">Certification Breakdown</a></li>
-            <li><a href="#chart4">Popularity Trends</a></li>
-            <li><a href="#chart5">Language Counts</a></li>
-            <li><a href="#chart6">Votes by Genre</a></li>
-            <li><a href="#chart7">Monthly Releases</a></li>
-            <li><a href="#chart8">Decadal Releases</a></li>
-            <li><a href="#chart9">Country Releases</a></li>
-            <li><a href="#chart11">Yearly Top Movies</a></li>
-            <li><a href="#chartVotesOverYears">Votes Over Time</a></li>
-            <li><a href="#chartHighlyRatedMovies">Top Movies Trends</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-        </ul>
-    </nav>
-    <div>
-        <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div class="chart-container" style="margin-bottom: 250px">
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title1" style="cursor: pointer">Number of Movies Released Each Year</h2>
-            <canvas id="chart1"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title2" style="cursor: pointer">Popularity of Genres</h2>
-            <canvas id="chart2"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title3" style="cursor: pointer">Movies Distribution by Certification</h2>
-            <canvas id="chart3"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title4" style="cursor: pointer">Average Movie Popularity Over Time</h2>
-            <canvas id="chart4"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title5" style="cursor: pointer">Movies Count by Original Language</h2>
-            <canvas id="chart5"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title6" style="cursor: pointer">Average Vote Count by Genre</h2>
-            <canvas id="chart6"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title7" style="cursor: pointer">Movie Releases by Month</h2>
-            <canvas id="chart7"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title8" style="cursor: pointer">Movie Releases by Decades</h2>
-            <canvas id="chart8"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title9" style="cursor: pointer">Movie Releases by Countries</h2>
-            <canvas id="chart9"></canvas>
-        </div>
-        <div class="chart-box" id="chart-title1">
-            <h2 class="chart-title" id="chart-title10" style="cursor: pointer">Top Rated Movies per Year</h2>
-            <canvas id="chart11"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title11" style="cursor: pointer">Total Movie Votes Over Years</h2>
-            <canvas id="chartVotesOverYears"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated Movies Over Years</h2>
-            <canvas id="chartHighlyRatedMovies"></canvas>
-        </div>
-    </div>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="ad-container2" style="display: block; text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script src="../js/analytics.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData1()}/3/search/multi?${getMovieNames1()}${getMovieCode1()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.error("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.error('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData1()}/3/person/${item.id}?${getMovieNames1()}${getMovieCode1()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.error('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.error('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        function getMovieVerseData1(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function getMovieNames1(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode1() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/api_fails.html b/MovieVerse-Mobile/platforms/ios/www/html/api_fails.html
deleted file mode 100644
index c7fa1c18..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/api_fails.html
+++ /dev/null
@@ -1,1026 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>We're Offline - The MovieVerse</title>
-    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html">
-    <meta property="og:title" content="We're Offline - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="We're Offline - The MovieVerse">
-    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="center-text" style="padding: 120px;">
-        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">MovieVerse is Offline</div>
-        <p>We're sorry, our service is currently unavailable. This could be due to a temporary issue with our servers or your internet connection. Please try again.</p>
-        <p>If you continue to experience issues, please contact our support team at <a id="link" href="support.html">our support page</a>.</p>
-        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
-    </div>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 500px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/article.hbs b/MovieVerse-Mobile/platforms/ios/www/html/article.hbs
deleted file mode 100644
index 644be6cd..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/article.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{article.title}}</title>
-</head>
-<body>
-  <header>
-    <h1>{{article.title}}</h1>
-    <p>Written by: {{article.author}}</p>
-  </header>
-  <article>
-    <p>{{article.content}}</p>
-  </article>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/chat.html b/MovieVerse-Mobile/platforms/ios/www/html/chat.html
deleted file mode 100644
index 4054ba67..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/chat.html
+++ /dev/null
@@ -1,1023 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Chat - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Chat - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chat.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chat.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Chat - The MovieVerse">
-    <meta name="twitter:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .user-search-result {
-            background-color: #333;
-            margin: 10px auto;
-            padding: 10px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            color: white;
-            transition: background-color 0.3s ease;
-            flex-wrap: wrap;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-        }
-        .user-search-result img {
-            flex-shrink: 0;
-            margin-right: 10px;
-            border-radius: 8px;
-        }
-        .user-search-result > div {
-            flex: 1;
-            min-width: 120px;
-            word-break: break-word;
-        }
-        .tooltip {
-            position: absolute;
-            background-color: #333;
-            color: white;
-            padding: 5px 10px;
-            border-radius: 5px;
-            z-index: 100;
-            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-            white-space: nowrap;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        #main {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            min-height: 80vh;
-        }
-        #userListContainer {
-            flex-basis: 30%;
-            background-color: rgba(0, 0, 0, 0.7);
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-        }
-        #searchUserInput {
-            width: 100%;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #ff8623;
-            margin-bottom: 10px;
-            background-color: #333;
-            color: white;
-        }
-        @media (min-width: 768px) {
-            #searchUserInput {
-                min-width: 320px;
-            }
-        }
-        .user:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .user {
-            border-radius: 8px;
-            padding: 5px;
-            cursor: pointer;
-        }
-        .user-item {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-            background-color: #333;
-            color: white;
-        }
-        .user-item:hover {
-            background-color: #ff8623;
-        }
-        .user-avatar {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            margin-right: 10px;
-        }
-        .user-info {
-            flex-grow: 1;
-        }
-        .user-email {
-            font-weight: bold;
-        }
-        .user-bio {
-            color: #ccc;
-        }
-        #chatSection {
-            display: flex;
-            flex-direction: column;
-            flex-basis: 65%;
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-            min-height: 90vh;
-        }
-        #messages {
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 20px;
-            background: none;
-            display: flex;
-            flex-direction: column;
-            border-radius: 8px;
-        }
-        #chatInput {
-            padding: 10px;
-            border-top: 1px solid #ccc;
-        }
-        #userEmailDisplay {
-            background-color: #ff8623;
-            color: white;
-            border-radius: 10px;
-            padding: 10px;
-        }
-        .message {
-            margin: 5px 0;
-            padding: 10px;
-            border-radius: 8px;
-            max-width: 80%;
-            word-wrap: break-word;
-        }
-        .my-message {
-            align-self: flex-end;
-            background-color: #ff8623;
-            color: white;
-        }
-        .other-message {
-            align-self: flex-start;
-            background-color: #7378c5;
-            color: white;
-        }
-        #chatInput {
-            padding: 10px;
-            border-top: 1px solid #ccc;
-        }
-        #messageInput {
-            flex-grow: 1;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #ff8623;
-            background-color: #333;
-            color: white;
-            width: 100%;
-        }
-        #sendButton {
-            padding: 10px 20px;
-            border-radius: 5px;
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #sendButton:hover {
-            background-color: #7f4caf;
-        }
-        #main {
-            display: flex;
-            justify-content: space-between;
-            align-items: stretch;
-            min-height: 80vh;
-            gap: 20px;
-        }
-        #userListContainer {
-            flex: 1;
-            background-color: rgba(0, 0, 0, 0.7);
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-        }
-        #chatSection {
-            flex: 2;
-            display: flex;
-            flex-direction: column;
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-            padding: 20px;
-        }
-        @media (max-width: 900px) {
-            #main {
-                flex-direction: column;
-                align-items: center;
-                width: 100%;
-                margin-left: 0;
-            }
-            #userListContainer, #chatSection {
-                width: 90% !important;
-                margin: 0 auto;
-                max-width: 100% !important;
-                display: flex;
-                flex-direction: column;
-            }
-            #userList {
-                max-height: 300px;
-                overflow-y: auto;
-            }
-            #chatSection {
-                width: 100% !important;
-                flex-grow: 1;
-            }
-            #noUserSelected {
-                width: 90% !important;
-                flex-grow: 1;
-            }
-        }
-        .selected-user {
-            background-color: #ff8623;
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <main id="main" style="margin-bottom: 20px">
-        <div id="userListContainer">
-            <div id="searchContainer">
-                <input type="text" id="searchUserInput" placeholder="Search for a user" style="font: inherit" />
-            </div>
-            <div id="searchUserResults"></div>
-            <h3>Recent & Suggested Chats</h3>
-            <div id="userList"></div>
-        </div>
-        <div id="chatSection">
-            <div id="userEmailDisplay" style="padding: 10px;"></div>
-            <div id="messages"></div>
-            <div id="chatInput">
-                <input type="text" id="messageInput" placeholder="Type your message" style="font: inherit" />
-                <button id="sendButton">Send</button>
-            </div>
-        </div>
-        <div id="noUserSelected" style="flex-basis: 65%; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; color: white; display: flex; justify-content: center; align-items: center; min-height: 90vh;">
-            <p>Welcome to MovieVerse Chats! Select or find a user to begin chatting with your fellow movie enthusiasts!</p>
-        </div>
-    </main>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-        <p style="color: white; margin-left: 10px">Loading chats...</p>
-    </div>
-    <footer id="footer">
-        <p>© 2024 The MovieVerse. All rights reserved.</p>
-    </footer>
-    <script type="module" src="../js/chat.js"></script>
-    <script src="../js/chat-auxiliary.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/chatbot.html b/MovieVerse-Mobile/platforms/ios/www/html/chatbot.html
deleted file mode 100644
index c3f9dc5c..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/chatbot.html
+++ /dev/null
@@ -1,846 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Chatbot - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html">
-    <meta property="og:title" content="Chatbot - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Chatbot - The MovieVerse">
-    <meta name="twitter:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="manifest" href="../../manifest.json">
-    <script type="importmap">
-        {
-          "imports": {
-            "@google/generative-ai": "https://esm.run/@google/generative-ai"
-          }
-        }
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        #header {
-            margin-top: 26px;
-            padding-left: 25px;
-        }
-        #form {
-            margin-top: -5px;
-            margin-right: 55px;
-        }
-        @media (max-width: 800px){
-            #header {
-                margin-top: 10px;
-            }
-            #form {
-                margin-top: -15px;
-                margin-right: 0;
-            }
-        }
-        @media (min-width: 900px) {
-            #header {
-                margin-top: 26px;
-                padding-left: 25px;
-            }
-            #form {
-                margin-top: 2px;
-            }
-            #my-heading {
-                margin-top: 17px !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #my-heading {
-                margin-top: 9px !important;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        #homepage-header {
-            margin-top: -10px;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-            #homepage-header {
-                margin-top: 10px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="bot-header">
-        <h2 id="search-title">The <span class="highlight1">MovieVerse</span> Assistant</h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-        <h4 id="alt-title" style="font-weight: normal; font-size: 15px; color: #ff8623">Dive deep into the movie world with our expert assistant!</h4>
-    </div>
-    <main id="main" style="padding: 0; margin: 0 auto; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 400px">
-        <div id="chatbotContainer">
-            <div id="chatbotHeader">The MovieVerse Assistant</div>
-            <div id="chatbotBody"></div>
-            <input id="chatbotInput" type="text" placeholder="Ask me about anything..." title="Type your message here"/>
-            <button id="sendButton" title="Send this message">Send</button>
-        </div>
-    </main>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/chatbot.js" type="module"></script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-        <p style="color: white; margin-left: 10px">Loading response...</p>
-    </div>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; color: white; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-            });
-
-            function displaySearchResults(results) {
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-                    details.style.textAlign = 'left';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-    </script>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/christopher-nolan.html b/MovieVerse-Mobile/platforms/ios/www/html/christopher-nolan.html
deleted file mode 100644
index 2874ec08..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/christopher-nolan.html
+++ /dev/null
@@ -1,497 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Director Details - Explore More About Christopher Nolan</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/christopher-nolan.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html">
-    <meta property="og:title" content="Director Details - Christopher Nolan">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Director Details - Christopher Nolan">
-    <meta name="twitter:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" style="margin-left: 25px">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 25px; margin-bottom: -40px">
-
-    </main>
-
-    <div class="details-container" id="director-details-container">
-        <!-- Left side for Director Image -->
-        <div class="director-left" style="overflow: hidden">
-            <h2 id="director-name" class="director-header"></h2>
-            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; overflow: hidden"/>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="director-right" id="director-description">
-            <!-- Director details will be populated here -->
-        </div>
-    </div>
-
-    <script src="../js/christopher-nolan.js"></script>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-
-<script>
-    function getMovieVerseData(input) {
-        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-    }
-
-    async function showMovieOfTheDay() {
-        const year = new Date().getFullYear();
-        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-        try {
-            const response = await fetch(url);
-            const data = await response.json();
-            const movies = data.results;
-
-            if (movies.length > 0) {
-                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                localStorage.setItem('selectedMovieId', randomMovie.id);
-                window.location.href = 'movie-details.html';
-            }
-            else {
-                fallbackMovieSelection();
-            }
-        }
-        catch (error) {
-            console.log('Error fetching movie:', error);
-            fallbackMovieSelection();
-        }
-    }
-
-    const movieCode = {
-        part1: 'YzVhMjBjODY=',
-        part2: 'MWFjZjdiYjg=',
-        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-    };
-
-    function getMovieCode() {
-        return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-    }
-
-    function generateMovieNames(input) {
-        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-    }
-
-    function fallbackMovieSelection() {
-        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-        localStorage.setItem('selectedMovieId', randomFallbackMovie);
-        window.location.href = 'movie-details.html';
-    }
-
-    document.getElementById('settings-btn').addEventListener('click', () => {
-        window.location.href = 'settings.html';
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-        applySettings();
-
-        function applySettings() {
-            const savedBg = localStorage.getItem('backgroundImage');
-            const savedTextColor = localStorage.getItem('textColor');
-            const savedFontSize = localStorage.getItem('fontSize');
-
-            if (savedBg) {
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-            }
-            if (savedTextColor) {
-                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                    element.style.color = savedTextColor;
-                });
-            }
-            if (savedFontSize) {
-                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                document.body.style.fontSize = size;
-            }
-        }
-    });
-</script>
-
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/company-details.html b/MovieVerse-Mobile/platforms/ios/www/html/company-details.html
deleted file mode 100644
index f0b6c77c..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/company-details.html
+++ /dev/null
@@ -1,795 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Company Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/company-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Company Details - The MovieVerse" />
-    <meta name="description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Company Details - The MovieVerse">
-    <meta name="twitter:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @media (min-width: 800px) {
-            footer {
-                margin-top: 500px;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: 0 !important;
-            }
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <main id="main" style="margin-left: 25px; height: 0"></main>
-    <div class="details-container" id="company-details-container" style="margin-bottom: 650px">
-        <div class="company-left">
-            <div class="title-logo-container">
-                <h2 id="company-name" class="company-header"></h2>
-                <img id="company-logo" alt="Loading Company Details..." style="z-index: 1000000000; width: 25vw; background-color: #ffffff; border-radius: 8px;"/>
-            </div>
-        </div>
-        <div class="company-right">
-            <p id="company-description" class="company-description"></p>
-            <p><strong>Headquarters:</strong> <span id="company-headquarters"></span></p>
-            <p><strong>Country:</strong> <span id="company-country"></span></p>
-            <p><strong>Website:</strong> <a id="company-website" href="" target="_blank"></a></p>
-            <p style="text-align: center"><strong>Produced Movies:</strong></p>
-            <div style="text-align: center" id="company-movies-list" class="movies-list"></div>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 250px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/company-details.js"></script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('company-logo').addEventListener('click', function() {
-            const imageUrl = this.src.replace('w500', 'original');
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/create-account.html b/MovieVerse-Mobile/platforms/ios/www/html/create-account.html
deleted file mode 100644
index ad374615..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/create-account.html
+++ /dev/null
@@ -1,1052 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Create Account - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html">
-    <meta property="og:title" content="Create Account - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Create Account - The MovieVerse">
-    <meta name="twitter:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="theme-color" content="#7378c5">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .account-creation-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .account-creation-form-container input[type="email"],
-        .account-creation-form-container input[type="password"],
-        .account-creation-form-container input[type="text"],
-        .account-creation-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .account-creation-form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-        .account-creation-form-container button:hover {
-            background-color: #22254b;
-            color: white;
-        }
-        .account-creation-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .account-creation-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-        #back-to-sign-in {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #back-to-sign-in:hover {
-            background-color: #22254b;
-            color: white;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0;
-            }
-        }
-        #local-time {
-            transform: translateX(12%);
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="account-creation-form-container" id="account-creation-form-container" style="margin-bottom: 300px">
-        <form id="createAccountForm">
-            <h2>Create Account</h2>
-            <p style="color: black">Create an account to personalize your movie recommendations, save  <a style="text-decoration: underline" id="githubLink1" href="favorites.html">favorites</a>, and enhance your movie discovery experience.</p>
-            <input type="email" id="newEmail" placeholder="Email" required>
-            <input type="password" id="newPassword" placeholder="Password" required>
-            <input type="password" id="confirmPassword" placeholder="Re-type Password" required>
-            <label style="margin-top: 10px; margin-bottom: 10px">
-                <input type="checkbox" id="togglePassword"> Show Password
-            </label>
-            <button type="submit">Create Account</button>
-            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
-        </form>
-    </div>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('newPassword');
-            const confirmPasswordInput = document.getElementById('confirmPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-                confirmPasswordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-                confirmPasswordInput.type = 'password';
-            }
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script src="../js/create-account.js" type="module"></script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-    </script>
-    <footer style="margin-top: 650px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/director-details.html b/MovieVerse-Mobile/platforms/ios/www/html/director-details.html
deleted file mode 100644
index 55acbdc4..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/director-details.html
+++ /dev/null
@@ -1,835 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Director Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/director-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html">
-    <meta property="og:title" content="Director Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Director Details - The MovieVerse">
-    <meta name="twitter:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        header {
-            margin-top: -5px;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="details-container" id="director-details-container" style="margin-top: -50px; margin-bottom: 60px">
-        <!-- Left side for Director Image -->
-        <div class="director-left" style="overflow-y: hidden">
-            <h2 id="director-name" class="director-header"></h2>
-            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
-            <div style="height: 20px"></div>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="director-right" id="director-description">
-            <!-- Director details will be populated here -->
-        </div>
-    </div>
-
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/director-details.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-
-<script>
-    function getMovieVerseData(input) {
-        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-    }
-
-    async function showMovieOfTheDay() {
-        const year = new Date().getFullYear();
-        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-        try {
-            const response = await fetch(url);
-            const data = await response.json();
-            const movies = data.results;
-
-            if (movies.length > 0) {
-                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                localStorage.setItem('selectedMovieId', randomMovie.id);
-                window.location.href = 'movie-details.html';
-            }
-            else {
-                fallbackMovieSelection();
-            }
-        }
-        catch (error) {
-            console.log('Error fetching movie:', error);
-            fallbackMovieSelection();
-        }
-    }
-
-    const movieCode1 = {
-        part1: 'YzVhMjBjODY=',
-        part2: 'MWFjZjdiYjg=',
-        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-    };
-
-    function getMovieCode() {
-        return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-    }
-
-    function generateMovieNames(input) {
-        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-    }
-
-    function fallbackMovieSelection() {
-        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-        localStorage.setItem('selectedMovieId', randomFallbackMovie);
-        window.location.href = 'movie-details.html';
-    }
-
-    document.getElementById('settings-btn').addEventListener('click', () => {
-        window.location.href = 'settings.html';
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-        applySettings();
-
-        function applySettings() {
-            const savedBg = localStorage.getItem('backgroundImage');
-            const savedTextColor = localStorage.getItem('textColor');
-            const savedFontSize = localStorage.getItem('fontSize');
-
-            if (savedBg) {
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-            }
-            if (savedTextColor) {
-                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                    element.style.color = savedTextColor;
-                });
-            }
-            if (savedFontSize) {
-                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                document.body.style.fontSize = size;
-            }
-        }
-    });
-
-    document.getElementById('director-image').addEventListener('click', function() {
-        const imageUrl = this.src.replace('w1280', 'original');
-        const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-        document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-        document.getElementById('image-modal').addEventListener('click', function(event) {
-            if (event.target === this) {
-                this.remove();
-            }
-        });
-    });
-</script>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/favorites.html b/MovieVerse-Mobile/platforms/ios/www/html/favorites.html
deleted file mode 100644
index a679ec41..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/favorites.html
+++ /dev/null
@@ -1,1102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Favorites & Watchlists - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/movie-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Favorites & Watchlists - The MovieVerse" />
-    <meta name="description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <script src="../js/settings.js"></script>
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Favorites & Watchlists - The MovieVerse">
-    <meta name="twitter:description" content="Manage your favorite movies and watch lists on The MovieVerse. Keep track of movies you love and organize your watch lists for future viewing.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <script src="../js/favorites.js" type="module"></script>
-    <link rel="manifest" href="../../manifest.json">
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .watchlist-controls {
-            position: absolute;
-            top: 10px;
-            display: flex;
-            align-items: start;
-            gap: 5px;
-        }
-        .watchlist-controls button {
-            background: none;
-            border: none;
-            color: #ff8623;
-            cursor: pointer;
-            height: 20px;
-            width: 20px;
-            margin-right: 8px;
-            font-size: 18px;
-        }
-        #create-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #edit-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #delete-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        .watchlist.pinned .watchlist-controls #pin-btn {
-            color: #7378c5;
-        }
-        .watchlist-controls button:hover {
-            color: #7378c5;
-        }
-        .watchlist-controls button:first-child {
-            order: -1;
-        }
-        .watchlist {
-            position: relative;
-            padding-top: 30px;
-        }
-        .watchlist.pinned {
-            border: 2px solid yellow;
-        }
-        .watchlist-buttons-container {
-            display: flex;
-            justify-content: center;
-            gap: 10px;
-            margin-left: 0;
-            margin-top: 35px;
-            margin-bottom: 15px;
-        }
-        @media (max-width: 1200px) {
-            #local-time {
-                display: none;
-            }
-        }
-        #button {
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        #how-to-use {
-            text-align: center;
-            margin-top: 20px;
-            margin-bottom: 60px;
-        }
-        #how-to-use-btn {
-            background-color: #7378c5;
-            color: white;
-            border-radius: 8px;
-            padding: 10px 20px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font: inherit;
-            cursor: pointer;
-            border: none;
-        }
-        #how-to-use-btn:hover {
-            background-color: #ff8623;
-        }
-        #how-to-use-section {
-            max-width: 400px;
-            margin: 20px auto;
-            padding: 15px;
-            background-color: #7378c5;
-            color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            display: none;
-            transition: height 0.5s ease-in-out;
-            margin-bottom: 240px;
-        }
-        #how-to-use-section:hover {
-            background-color: #6e73bd;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #githubLink3 {
-            color: white !important;
-        }
-        #githubLink3:hover {
-            color: #ff8623 !important;
-            transition: 0.1s ease-in;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -30px; padding-top: 19px">
-        <div id="header-title">
-            <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
-                <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                    The Mo<span class="highlight" id="highlight">vieV</span>erse
-                </a>
-            </h1>
-        </div>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 5px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul id="watchlist-links" style="overflow-y: auto">
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-
-    <div class="watchlist-buttons-container">
-        <button id="create-watchlist-btn">Create Watch Lists</button>
-        <button id="edit-watchlist-btn">Edit Watch Lists</button>
-        <button id="delete-watchlist-btn">Delete Watch Lists</button>
-    </div>
-
-    <div id="create-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('create-watchlist-modal')">&times;</span>
-            <h2>Create a Watch List</h2>
-            <form id="create-watchlist-form">
-                <label>Name:</label>
-                <input type="text" id="new-watchlist-name" placeholder="Watchlist's Name" style="font: inherit" required>
-                <div style="height: 20px"></div>
-                <label>Description:</label>
-                <textarea placeholder="Watchlist Description" id="new-watchlist-description" style="font: inherit"></textarea>
-                <button type="submit" id="button" style="display: block; margin-left: auto; color: white; margin-right: auto;">Create</button>
-            </form>
-        </div>
-    </div>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <div id="edit-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('edit-watchlist-modal')">&times;</span>
-            <h2>Edit a Watch List</h2>
-            <form id="edit-watchlist-form">
-                <!-- Dynamically populate this form based on user selection -->
-            </form>
-        </div>
-    </div>
-
-    <div id="delete-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('delete-watchlist-modal')">&times;</span>
-            <h2>Delete Watch Lists</h2>
-            <label>Select watch lists to delete:</label>
-            <form id="delete-watchlist-form">
-                <!-- Dynamically populate this form based on user selection -->
-            </form>
-        </div>
-    </div>
-
-    <div id="watchlists-display-section">
-        <!-- Dynamically populated watch lists will go here -->
-    </div>
-
-    <main id="favorites-main" style="margin-top: 75px; text-align: center"></main>
-    <main id="favorites-main-tv" style="margin-top: 75px; text-align: center"></main>
-
-    <div id="how-to-use">
-        <button id="how-to-use-btn">How to Use</button>
-    </div>
-
-    <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
-        <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
-        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
-        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
-        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
-        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
-        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
-        <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists! 🍿🎬</p>
-    </div>
-
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink3" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" title="Go to top" style="bottom: 90px; right: 10px; z-index: 10012" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">Back to Top</button>
-    <script src="../js/movie-details.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script type="module">
-        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
-        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
-
-        let initialMoviesSelection = [];
-        let initialTVSeriesSelection = [];
-
-        function translateFBC(value) {
-            return atob(value);
-        }
-
-        function getFBConfig1() {
-            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
-            return translateFBC(fbConfig1);
-        }
-
-        function getFBConfig2() {
-            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
-            return translateFBC(fbConfig2);
-        }
-
-        function getFBConfig3() {
-            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
-            return translateFBC(fbConfig3);
-        }
-
-        function getFBConfig4() {
-            const fbConfig4 = "ODAyOTQzNzE4ODcx";
-            return translateFBC(fbConfig4);
-        }
-
-        function getFBConfig5() {
-            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
-            return translateFBC(fbConfig5);
-        }
-
-        const firebaseConfig = {
-            apiKey: getFBConfig1(),
-            authDomain: getFBConfig2(),
-            projectId: "movieverse-app",
-            storageBucket: getFBConfig3(),
-            messagingSenderId: getFBConfig4(),
-            appId: getFBConfig5()
-        };
-
-        const app = initializeApp(firebaseConfig);
-        const db = getFirestore(app);
-
-        async function loadNavWatchlistLinks() {
-            const navList = document.getElementById('watchlist-links');
-            const firstStaticItem = navList.querySelector('li');
-
-            try {
-                showSpinner();
-
-                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                let watchlists = [];
-
-                if (currentUserEmail) {
-                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
-                    const querySnapshot = await getDocs(q);
-                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
-                }
-                else {
-                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
-                }
-
-                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
-                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
-
-                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
-
-                let counter = 1;
-
-                watchlists.forEach(watchlist => {
-                    const listItem = document.createElement('li');
-                    listItem.className = 'dynamic';
-                    const link = document.createElement('a');
-                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
-
-                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
-                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
-                        counter++;
-                    }
-                    else {
-                        link.textContent = watchlist.name;
-                    }
-
-                    listItem.appendChild(link);
-                    navList.insertBefore(listItem, firstStaticItem);
-                });
-
-                hideSpinner();
-                assignIdsToWatchlists();
-            }
-            catch (error) {
-                console.error('Error loading watchlists for navigation:', error);
-                hideSpinner();
-            }
-        }
-
-        function assignIdsToWatchlists() {
-            document.querySelectorAll('.watchlist').forEach(watchlist => {
-                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
-                if (!watchlist.id) {
-                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
-                }
-            });
-        }
-
-        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
-    </script>
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/feedback.html b/MovieVerse-Mobile/platforms/ios/www/html/feedback.html
deleted file mode 100644
index 41e43187..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/feedback.html
+++ /dev/null
@@ -1,1107 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Feedback - The MovieVerse</title>
-    <meta name="description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them." />
-    <meta property="og:title" content="Feedback - The MovieVerse">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Feedback - The MovieVerse">
-    <meta name="twitter:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .form-container h1 {
-            color: #ff8623;
-        }
-        .form-container input,
-        .form-container textarea,
-        .form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .form-container button[type="submit"]:hover {
-            background-color: #ff8623;
-        }
-        .form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        #supportBtn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #supportBtn:hover {
-            background-color: #ff8623;
-        }
-        @media (min-width: 900px) {
-            #my-heading {
-                margin-top: 15px !important;
-            }
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="form-container">
-        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Feedback</div>
-        <p style="color: black">Noticed a bug? Have a suggestion? Wrong movie information? Or just want to say hi? We'd love to hear from you!</p>
-        <form action="https://formspree.io/f/xqkrbdqd" method="POST">
-            <input type="text" id="name" name="name" placeholder="Your Name" required>
-            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
-            <textarea id="message" name="message" placeholder="Your Feedback" required></textarea>
-            <button type="submit">Send Feedback</button>
-            <p style="color: black">Need immediate assistance? Submit a support request using the link below and we'll get back to you as soon as possible.</p>
-        </form>
-        <button id="supportBtn" onclick="window.location.href='support.html'">Request Support</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 200px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/inception.html b/MovieVerse-Mobile/platforms/ios/www/html/inception.html
deleted file mode 100644
index 897d13a4..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/inception.html
+++ /dev/null
@@ -1,521 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Details - Explore Inception by Christopher Nolan</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/inception.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/inception.html">
-    <meta property="og:title" content="Movie Details - Explore Inception by Christopher Nolan">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/inception.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/inception.jpg"/>
-    <meta property="og:image:alt" content="Inception Movie Poster">
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Details - Explore Inception by Christopher Nolan">
-    <meta name="twitter:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px">
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 35px; margin-top: 20px">
-
-    </main>
-
-    <div class="details-container" id="movie-details-container">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw"/>
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px"><strong>0.0/5.0</strong></span>
-        </div>
-
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-            <div id="comments-section">
-                <h3>Community Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Toggle Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This Movie</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname" required>
-                            <textarea id="user-comment" placeholder="Your comment" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your ideas!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </div>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script src="../js/inception.js"></script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('movie-image').addEventListener('click', function() {
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-
-    <script src="../js/comments.js" type="module"></script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/leonardo-dicaprio.html b/MovieVerse-Mobile/platforms/ios/www/html/leonardo-dicaprio.html
deleted file mode 100644
index 18a4d369..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/leonardo-dicaprio.html
+++ /dev/null
@@ -1,470 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Actor Details - Leonardo DiCaprio</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta name="description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html">
-    <meta property="og:title" content="Actor Details - Leonardo DiCaprio">
-    <meta property="og:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Actor Details - Leonardo DiCaprio">
-    <meta name="twitter:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <script src="../js/leonardo-dicarprio.js" defer></script>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        body {
-            background-image: url("https://movie-verse.com/images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-
-            <div id="search-results" class="search-results"></div>
-
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" style="margin-left: 25px">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 25px"></main>
-
-    <div class="details-container" id="actor-details-container">
-        <!-- Left side for Actor Image -->
-        <div class="actor-left" style="overflow: hidden">
-            <h2 id="actor-name" class="actor-header"></h2>
-            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw"/>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="actor-right" id="actor-description">
-            <!-- Actor details will be populated here -->
-        </div>
-    </div>
-
-    <script src="../js/leonardo-dicarprio.js"></script>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('actor-image').addEventListener('click', function() {
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/movie-details.html b/MovieVerse-Mobile/platforms/ios/www/html/movie-details.html
deleted file mode 100644
index bfc4fb00..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/movie-details.html
+++ /dev/null
@@ -1,907 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/movie-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html">
-    <meta property="og:title" content="Movie Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Details - The MovieVerse">
-    <meta name="twitter:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        #favorite-btn:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        .favorited:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #movie-details-container {
-                margin-top: -50px;
-            }
-        }
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #rating-header {
-            color: #ffeb3b;
-        }
-        #rating-header:hover {
-            color: #ff8623;
-            transition: 0.2s ease-in;
-        }
-        #movie-details-container {
-            margin-top: 39px;
-        }
-        .movie-left {
-            margin-top: -10px;
-        }
-        @media (max-width: 767px) {
-            #movie-details-container {
-                margin-top: 0;
-            }
-            #form1 {
-                margin-bottom: 39px;
-            }
-            .movie-left {
-                margin-top: -40px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" >
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none; height: 0">
-        <h2 id="search-title"></h2>
-    </div>
-    <main id="main" style="margin-left: 35px; height: 0"></main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
-            <div id="comments-section">
-                <h3>Movie Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Toggle Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal" style="z-index: 100005">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This Movie</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
-                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right" style="position: relative; overflow: hidden">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: -20px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/movie-details.js"></script>
-    <script src="../js/add-to-favorites.js" type="module"></script>
-    <script type="module">
-        import { toggleFavorite, checkAndUpdateFavoriteButton } from '../js/add-to-favorites.js';
-
-        document.addEventListener('DOMContentLoaded', () => {
-            const favoriteBtn = document.getElementById('favorite-btn');
-            if (favoriteBtn) {
-                favoriteBtn.addEventListener('click', toggleFavorite);
-            }
-        });
-
-        checkAndUpdateFavoriteButton();
-    </script>
-    <script type="module">
-        import { loadUserRatings, updateAverageMovieRating } from '../js/ratings-module.js';
-
-        document.addEventListener('DOMContentLoaded', async () => {
-            const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-            const savedRatings = await loadUserRatings(currentUserEmail);
-            const movieId = localStorage.getItem('selectedMovieId');
-            const movieRating = savedRatings[movieId] || 0;
-            setStarRating(movieRating);
-        });
-
-        function setStarRating(rating) {
-            const stars = document.querySelectorAll('.rating .star');
-            stars.forEach(star => {
-                star.style.color = star.dataset.value > rating ? 'white' : 'gold';
-            });
-            document.getElementById('rating-value').textContent = `${rating}.0/5.0`;
-        }
-
-        let isHovering = false;
-
-        const stars = document.querySelectorAll('.rating .star');
-        stars.forEach(star => {
-            star.addEventListener('mouseover', (e) => {
-                isHovering = true;
-                setStarRating(e.target.dataset.value);
-            });
-
-            star.addEventListener('mouseout', () => {
-                isHovering = false;
-                setTimeout(() => {
-                    if (!isHovering) {
-                        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                        loadUserRatings(currentUserEmail).then(savedRatings => {
-                            const movieId = localStorage.getItem('selectedMovieId');
-                            const movieRating = savedRatings[movieId] || 0;
-                            setStarRating(movieRating);
-                        });
-                    }
-                }, 10);
-            });
-
-            star.addEventListener('click', async (e) => {
-                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                const movieId = localStorage.getItem('selectedMovieId');
-                const rating = e.target.dataset.value;
-                await updateAverageMovieRating(currentUserEmail, movieId, rating);
-                window.location.reload();
-            });
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <script>
-        document.getElementById('movie-image').addEventListener('click', function() {
-            let imageUrl = this.src.replace('w780', 'original');
-            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-    <script src="../js/comments.js" type="module"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/movie-match.html b/MovieVerse-Mobile/platforms/ios/www/html/movie-match.html
deleted file mode 100644
index 6d4e0045..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/movie-match.html
+++ /dev/null
@@ -1,854 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Match - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html">
-    <meta property="og:title" content="Movie Match - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Match - The MovieVerse">
-    <meta name="twitter:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #search {
-            margin-top: -1px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <main id="movie-match-main" style="margin-bottom: 45vh">
-        <div class="movie-match-container">
-            <h2 id="search-title1">Find Your Movie Match</h2>
-            <form id="movie-match-form">
-                <label for="mood">Select Your Mood:</label>
-                <select id="mood">
-                    <option value="happy">Happy</option>
-                    <option value="sad">Sad</option>
-                    <option value="angry">Scary</option>
-                    <option value="adventurous">Adventurous</option>
-                    <option value="romantic">Romantic</option>
-                    <option value="thoughtful">Thoughtful</option>
-                </select>
-                <label for="genre">Preferred Genre:</label>
-                <select id="genre">
-                    <option value="action">Action</option>
-                    <option value="comedy">Comedy</option>
-                    <option value="drama">Drama</option>
-                    <option value="sci-fi">Sci-Fi</option>
-                    <option value="romance">Romance</option>
-                </select>
-                <label for="period">Time Period:</label>
-                <select id="period">
-                    <option value="2020s">2020s</option>
-                    <option value="2010s">2010s</option>
-                    <option value="2000s">2000s</option>
-                    <option value="90s">90s</option>
-                    <option value="80s">80s</option>
-                </select>
-                <input type="submit" value="Get Matched Movie">
-            </form>
-        </div>
-    </main>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script src="../js/movie-match.js"></script>
-    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.error("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.error('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.error('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.error('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.error('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script>
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <footer style="margin-top: 0">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/movie-timeline.html b/MovieVerse-Mobile/platforms/ios/www/html/movie-timeline.html
deleted file mode 100644
index c59d916d..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/movie-timeline.html
+++ /dev/null
@@ -1,806 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Timeline - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/actor-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html">
-    <meta property="og:title" content="Movie Timeline - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Timeline - The MovieVerse">
-    <meta name="twitter:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #search {
-            margin-top: -1px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        #footer {
-            margin-top: 700px
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #footer {
-                margin-top: 20px;
-            }
-        }
-    </style>
-
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .load-more-container {
-            width: 100%;
-            text-align: center;
-            margin-top: 20px;
-        }
-        .load-more-container button {
-            margin: 10px auto;
-            background-color: #7378c5;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font: inherit;
-            display: block;
-            transition: background-color 0.3s ease;
-        }
-        .load-more-container button:hover {
-            background-color: #ff8623;
-        }
-        #ad-container2 {
-            display: none;
-        }
-        @media (max-width: 768px) {
-            #ad-container2 {
-                display: block;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -20px; margin-top: -5px" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="timeline-container" style="margin-bottom: 300px">
-        <div class="center-container">
-            <div style="font-weight: bold; font-size: 27px" id="select-text">Select a Period</div>
-            <div class="year-input-container">
-                <input type="number" id="start-year" class="year-input" title="Enter any year from 1900 until now" placeholder="Start Year" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
-                <input type="number" id="end-year" class="year-input" placeholder="End Year" title="Enter any year from 1900 until now" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
-                <button id="load-movies" onclick="updateMovies()" title="Get Movies in the Chosen Period!">Get Movies in This Period</button>
-            </div>
-            <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
-        </div>
-        <div class="center-container1" id="center-container1">
-            <main id="results" style="scroll-behavior: smooth">
-                <!-- Movies will be dynamically loaded here -->
-            </main>
-        </div>
-    </div>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 255px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 220px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 185px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 150px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 115px; z-index: 10012; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 10012">Back To Top</button>
-
-    <script src="../js/movie-timeline.js"></script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" id="back-top">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('back-top').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-    </script>
-
-    <footer id="footer">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-</body>
-
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/movies-list.hbs b/MovieVerse-Mobile/platforms/ios/www/html/movies-list.hbs
deleted file mode 100644
index 8bdfc1c8..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/movies-list.hbs
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Movies List</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-    }
-    .movie {
-      margin-bottom: 20px;
-    }
-    .movie-title {
-      font-weight: bold;
-    }
-    .movie-year {
-      font-style: italic;
-    }
-    .movie-description {
-      margin-top: 5px;
-    }
-  </style>
-</head>
-<body>
-  <h1>Movies List</h1>
-  {{#each movies}}
-    <div class="movie">
-      <div class="movie-title">{{this.title}}</div>
-      <div class="movie-year">Released in: {{this.year}}</div>
-      <div class="movie-description">{{this.description}}</div>
-    </div>
-  {{/each}}
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/notifications.html b/MovieVerse-Mobile/platforms/ios/www/html/notifications.html
deleted file mode 100644
index 5aeeaee8..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/notifications.html
+++ /dev/null
@@ -1,1329 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Notifications - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Notifications - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations.">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html" />
-    <meta property="og:site_name" content="Notifications - The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Notifications - The MovieVerse">
-    <meta name="twitter:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations." />
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0 !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        main {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 20px;
-            padding: 20px;
-        }
-        section {
-            flex: 1 1 calc(33% - 40px);
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 100%;
-        }
-        @media (max-width: 1200px) {
-            section {
-                flex: 1 1 calc(50% - 40px);
-            }
-        }
-        @media (max-width: 768px) {
-            main {
-                flex-direction: column;
-            }
-            section {
-                flex-basis: 100%;
-            }
-        }
-        ul {
-            width: 100%;
-            padding: 0;
-            margin: 0;
-            list-style-type: none;
-        }
-        li {
-            width: 100%;
-            margin-top: 10px;
-            padding: 10px;
-            background-color: #ecf0f1;
-            border-left: 5px solid #2980b9;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        h2 {
-            margin-bottom: 10px;
-        }
-        li:hover {
-            background-color: #e1e3e4;
-            cursor: pointer;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #movie-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #actor-link {
-            color: black;
-        }
-        #director-link {
-            color: black;
-        }
-        #actor-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #director-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: 0 !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li style="background: none; border: none; box-shadow: none"><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#newFeatures">New Features</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#newReleases">New Releases</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#tipsTricks">Tips & Tricks</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#popularActors">Popular Actors</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#popularDirectors">Popular Directors</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="sign-in.html">Sign In</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="user-profile.html">Profile</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="feedback.html">Submit Feedback</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main>
-        <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
-            <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
-            <ul>
-                <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Improved Chatbot:</strong> Get personalized movie recommendations and insightful answers to your questions with our smarter chatbot.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Chat Feature:</strong> Join the conversation! Chat with fellow film fans in real-time to share your passion and discover new favorites.</li>
-                <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>Improved Recommendations:</strong>  Unlock a world of movies tailored just for you. Our enhanced engine suggests films based on your unique tastes and viewing habits.</li>
-                <li><i style="margin-right: 3px" class="fas fa-users"></i> <strong>User Profile Search:</strong>  Connect with your friends and discover their movie tastes. Search for user profiles and see what they're watching.</li>
-                <li><i style="margin-right: 3px" class="fas fa-user-plus"></i> <strong>Follow Other Users:</strong> Never miss a beat! Follow your friends to stay up-to-date on their latest movie discoveries and recommendations.</li>
-                <li><i style="margin-right: 3px" class="fas fa-share-alt"></i> <strong>Share Watch Lists:</strong> Spread the cinematic love! Create and share custom watch lists with friends and family, showcasing your curated collection of must-see films.</li>
-            </ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
-            <h3>Since Your Last Visit</h3>
-            <ul id="releasesSinceLastVisit"></ul>
-            <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
-            <ul id="releasesThisMonth"></ul>
-            <h3 style="margin-top: 35px">Since the Beginning of This Year</h3>
-            <ul id="releasesThisYear"></ul>
-            <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
-            <p style="color: black; margin-top: 0"> You can always view more recommended movies in your recommended list in <a id="githubLink1" href="../../index.html#recommendedDIV">your recommended movies section</a>.</p>
-            <ul id="recommendedReleases"></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
-            <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
-            <ul>
-                <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Engaging with the Community:</strong> Dive into vibrant discussions, share your insights, and connect with other film enthusiasts.</li>
-                <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Exploring Indie Films:</strong>  Unearth hidden cinematic treasures and broaden your horizons with our curated selection of independent films.</li>
-                <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>Rating Movies:</strong> Your voice matters! Share your opinions by rating movies and TV shows, helping us refine our recommendations for you and others.</li>
-                <li><i style="margin-right: 3px" class="fas fa-robot"></i> <strong>Chatting with the Chatbot:</strong> Need a movie suggestion or want to test your film trivia knowledge? Our friendly chatbot is always ready to entertain and inform.</li>
-                <li><i style="margin-right: 3px" class="fas fa-cloud"></i> <strong>Cloud Syncing:</strong> Your movie preferences follow you wherever you go. Enjoy seamless access to your watchlists and favorites across all your devices.</li>
-            </ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
-            <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
-            <ul></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
-            <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
-            <ul></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-    </main>
-    <script src="../js/notifications.js"></script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('newReleases').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('popularActors').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const updateDateElements = document.querySelectorAll('.updateDate');
-            const today = new Date();
-            const options = { year: 'numeric', month: 'long', day: 'numeric' };
-            const formattedDate = today.toLocaleDateString('en-US', options);
-            const formattedDateISO = today.toISOString().split('T')[0];
-
-            updateDateElements.forEach(element => {
-                element.textContent = formattedDate;
-                element.setAttribute('datetime', formattedDateISO);
-            });
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script>
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        let today = new Date();
-        today.setFullYear(today.getFullYear() - 18);
-        let year = today.getFullYear();
-        let month = (today.getMonth() + 1).toString().padStart(2, '0');
-        let day = today.getDate().toString().padStart(2, '0');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-
-    <footer style="margin-top: 20px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/offline.html b/MovieVerse-Mobile/platforms/ios/www/html/offline.html
deleted file mode 100644
index 3ab9890e..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/offline.html
+++ /dev/null
@@ -1,798 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>You're Offline - The MovieVerse</title>
-    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/offline.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:title" content="You're Offline - The MovieVerse">
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/offline.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="You're Offline - The MovieVerse">
-    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body class="movie-details-body">
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="center-text" style="padding: 150px;">
-        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">You're Offline</div>
-        <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
-        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 500px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/privacy-policy.html b/MovieVerse-Mobile/platforms/ios/www/html/privacy-policy.html
deleted file mode 100644
index f40bf2dc..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/privacy-policy.html
+++ /dev/null
@@ -1,395 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Privacy Policy - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta property="og:title" content="Privacy Policy - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Privacy Policy - The MovieVerse">
-    <meta name="twitter:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <meta name="theme-color" content="#7378c5">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body, html {
-            margin: 0;
-            padding: 0;
-            overflow-x: hidden;
-        }
-        .content-area {
-            margin: 0 auto;
-            max-width: 800px;
-            padding: 0;
-            text-align: center;
-        }
-        #linkWeb {
-            color: white;
-        }
-        #linkWeb:hover {
-            color: #ff8623;
-            text-decoration: underline;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-                margin-top: 10px;
-            }
-        }
-        @media (min-width: 900px) {
-            header {
-                margin-top: 4px !important;
-            }
-        }
-        header {
-            margin-top: -5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        h2 {
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-            #form1 {
-                margin-top: 5px !important;
-            }
-        }
-        #form1 {
-            margin-top: 20px;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -20px; margin-top: -5px !important;" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='https://movie-verse.com'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#introduction">Introduction</a></li>
-            <li><a href="#consent">Consent</a></li>
-            <li><a href="#subheading2">Information We Collect</a></li>
-            <li><a href="#subheading">How We Use Your Information</a></li>
-            <li><a href="#subheading3">Log Files</a></li>
-            <li><a href="#subheading4">Cookies and Web Beacons</a></li>
-            <li><a href="terms-of-service.html">Terms of Service</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main class="content-area" style="text-align: center">
-        <div style="text-align: center; width: 90%; margin-top: 25px">
-            <div style="font-weight: bold; font-size: 30px" id="privacy-header">Privacy Policy</div>
-        </div>
-        <div id="introduction" style="text-align: center; width: 90%">
-            <h2 style="cursor: pointer">Introduction</h2>
-            <p>At The MovieVerse, accessible from <a id="linkWeb" href="https://movie-verse.com">https://movie-verse.com</a>, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by The MovieVerse and how we use it.</p>
-        </div>
-        <div id="consent" style="text-align: center; width: 90%">
-            <h2 style="cursor: pointer">Consent</h2>
-            <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms. For our Terms and Conditions, please visit the <a id="linkWeb" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">Terms and Conditions</a> page.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading2">
-            <h2 style="cursor: pointer">Information we collect</h2>
-            <p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
-            <p>If you contact us directly, we may receive additional information about you such as your name, email address, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
-        </div>
-        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading">
-            <h2 style="cursor: pointer">How we use your information</h2>
-            <p>We use the information we collect in various ways, including to:</p>
-            <ul style="color: white; list-style: none; width: 90%">
-                <li>1. Provide, operate, and maintain our website</li>
-                <li>2. Improve, personalize, and expand our website</li>
-                <li>3. Understand and analyze how you use our website</li>
-                <li>4. Develop new products, services, features, and functionality</li>
-                <li>5. Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
-                <li>6. Send you emails</li>
-                <li>7. Find and prevent fraud</li>
-                <li>8. Log Files</li>
-            </ul>
-        </div>
-        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading3">
-            <h2 style="cursor: pointer">Log Files</h2>
-            <p>The MovieVerse follows a standard procedure of using log files.</p>
-            <p>These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics.</p>
-            <p>These are not linked to any information that is personally identifiable.</p>
-            <p>The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
-        </div>
-        <div style="text-align: center; margin-bottom: 300px; width: 90%; cursor: pointer" id="subheading4">
-            <h2 style="cursor: pointer">Cookies and Web Beacons</h2>
-            <p>Like any other website, The MovieVerse uses 'cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited.</p>
-            <p>The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
-            <p>We may analyze user behavior through the use of cookies and web beacons with Google Analytics. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. We partner with Google to use the data collected to track and monitor the use of our website.</p>
-            <p>For more general information on cookies, please read <a id="linkWeb" href="https://www.cookieconsent.com/what-are-cookies/">"What Are Cookies"</a>.</p>
-        </div>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script src="../js/privacy-policy.js"></script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/profile.ejs b/MovieVerse-Mobile/platforms/ios/www/html/profile.ejs
deleted file mode 100644
index 9fd52920..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/profile.ejs
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>User Profile</title>
-    <link rel="stylesheet" href="../css/style.css">
-</head>
-<body>
-<header>
-    <nav>
-        <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="/profile">Profile</a></li>
-        </ul>
-    </nav>
-</header>
-<main>
-    <section class="profile-container">
-        <h1>User Profile</h1>
-        <% if (user) { %>
-            <div class="profile-info">
-                <img src="<%= user.avatar %>" alt="Profile Avatar" class="profile-avatar">
-                <h2><%= user.name %></h2>
-                <p>Email: <%= user.email %></p>
-                <p>Location: <%= user.location %></p>
-                <p>Member since: <%= user.createdAt %></p>
-                <p>Favorite Movies:</p>
-                <ul>
-                    <% user.favoriteMovies.forEach(movie => { %>
-                        <li><%= movie.title %></li>
-                    <% }) %>
-                </ul>
-                <p>Favorite Genres:</p>
-                <ul>
-                    <% user.favoriteGenres.forEach(genre => { %>
-                        <li><%= genre %></li>
-                    <% }) %>
-                </ul>
-                <p>Favorite Actors:</p>
-                <ul>
-                    <% user.favoriteActors.forEach(actor => { %>
-                        <li><%= actor.name %></li>
-                    <% }) %>
-                </ul>
-                <p>
-                    <a href="/profile/edit">Edit Profile</a>
-                </p>
-            </div>
-        <% } else { %>
-            <p>User not found.</p>
-        <% } %>
-    </section>
-</main>
-<footer>
-    <p>&copy; 2024 The MovieVerse. All rights reserved.</p>
-</footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/reset-password.html b/MovieVerse-Mobile/platforms/ios/www/html/reset-password.html
deleted file mode 100644
index 3727e104..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/reset-password.html
+++ /dev/null
@@ -1,1097 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Reset Password - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html">
-    <meta property="og:title" content="Reset Password - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Reset Password - The MovieVerse">
-    <meta name="twitter:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        .password-reset-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-
-        .password-reset-form-container input[type="email"],
-        .password-reset-form-container input[type="password"],
-        .password-reset-form-container input[type="text"],
-        .password-reset-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-
-        #local-time {
-            transform: translateX(12%);
-        }
-
-        .password-reset-form-container button[type="submit"],
-        .password-reset-form-container button[type="button"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .password-reset-form-container button:hover {
-            background-color: #22254b;
-            color: white;
-        }
-
-        .password-reset-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        .password-reset-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-
-        #my-heading {
-            margin-top: 24px !important;
-        }
-
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <div class="password-reset-form-container" id="password-reset-form-container" style="margin-bottom: 300px">
-        <form id="resetPasswordForm">
-            <h2>Reset Password</h2>
-            <p style="color: black">Forgot your password? No worries! Enter your email to verify your account and reset your password.</p>
-            <input type="email" id="resetEmail" placeholder="Enter your email" required>
-            <button type="submit">Verify Account</button>
-            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
-        </form>
-        <div id="newPasswordFields" style="display: none;">
-            <p style="color: black">Great news! Your account has been verified. Now, enter and confirm your new password below.</p>
-            <input type="password" id="newPassword" placeholder="New Password" required>
-            <input type="password" id="confirmNewPassword" placeholder="Confirm New Password" required>
-            <div style="margin-top: 10px; margin-bottom: 10px">
-                <label>
-                    <input type="checkbox" id="togglePassword"> Show Password
-                </label>
-            </div>
-            <button type="button" id="updatePasswordButton">Update Password</button>
-        </div>
-    </div>
-
-    <footer style="margin-top: 750px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <script src="../js/reset-password.js" type="module"></script>
-
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('newPassword');
-            const confirmPasswordInput = document.getElementById('confirmNewPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-                confirmPasswordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-                confirmPasswordInput.type = 'password';
-            }
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-    </script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/search.html b/MovieVerse-Mobile/platforms/ios/www/html/search.html
deleted file mode 100644
index 683f51f8..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/search.html
+++ /dev/null
@@ -1,921 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
-<head>
-    <meta charset="UTF-8">
-    <title>Search Results - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:title" content="Search Results - The MovieVerse">
-    <meta property="og:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/search.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/search.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Search Results - The MovieVerse">
-    <meta name="twitter:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <script src="../js/search.js"></script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #local-time {
-            margin-left: 5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #ad-container {
-            display: block !important;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px" class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <main id="movie-match-main" style="margin-top: 10px; margin-bottom: 150px">
-        <h2 id="search-results-label">Search Results</h2>
-        <div class="category-buttons">
-            <button data-category="movie" onclick="showResults('movie')">Movies</button>
-            <button data-category="tv" onclick="showResults('tv')">TV Series</button>
-            <button data-category="person" onclick="showResults('person')">People</button>
-        </div>
-        <button id="toggle-filters-btn">Filter & Sort Results</button>
-        <!-- Filters for Movies -->
-        <div id="movie-tv-filters" style="display: none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="genre-filter">Genre:</label>
-            <select id="genre-filter">
-                <option value="">Select Genre</option>
-                <!-- Populated with genres -->
-            </select>
-            <label for="language-filter">Language:</label>
-            <select id="language-filter">
-                <option value="">Select Language</option>
-            </select>
-            <label for="year-filter">Year:</label>
-            <input type="number" id="year-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
-            <label style="vertical-align: center" for="rating-filter">Rating:</label>
-            <input type="range" id="rating-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
-            <span id="rating-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-movie"><strong>Sort by:</strong></label>
-            <select id="sort-movie" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
-                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
-                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
-            </select>
-        </div>
-        <!-- Filters for TV Series -->
-        <div id="tv-filters" style="display: none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="genre-tv-filter">Genre:</label>
-            <select id="genre-tv-filter">
-                <option value="">Select Genre</option>
-                <!-- Populated with genres -->
-            </select>
-            <label for="language-tv-filter">Language:</label>
-            <select id="language-tv-filter">
-                <option value="">Select Language</option>
-            </select>
-            <label for="year-tv-filter">Year:</label>
-            <input type="number" id="year-tv-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
-            <label style="vertical-align: center" for="rating-tv-filter">Rating:</label>
-            <input type="range" id="rating-tv-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
-            <span id="rating-tv-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-tv"><strong>Sort by:</strong></label>
-            <select id="sort-tv" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
-                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
-                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
-            </select>
-        </div>
-        <!-- Filters for People -->
-        <div id="people-filters" style="display:none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="profession-filter">Profession:</label>
-            <select id="profession-filter">
-                <option value="">Select Profession</option>
-                <option value="Acting">Acting</option>
-                <option value="Directing">Directing</option>
-            </select>
-            <label for="gender-filter">Gender:</label>
-            <select id="gender-filter">
-                <option value="">Select Gender</option>
-                <option value="2">Male</option>
-                <option value="1">Female</option>
-            </select>
-            <label for="popularity-filter">Popularity Score:</label>
-            <input type="range" id="popularity-filter" min="0" max="100" step="1" value="5" title="Popularity" />
-            <span id="popularity-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-people"><strong>Sort by:</strong></label>
-            <select id="sort-people" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-            </select>
-        </div>
-        <div id="movie-match-container1" class="movie-match-container1">
-            <main id="results"></main>
-        </div>
-    </main>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 90px; right: 10px; z-index: 10012" title="Back to top">Back to Top</button>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 10012" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w300${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/settings.html b/MovieVerse-Mobile/platforms/ios/www/html/settings.html
deleted file mode 100644
index 3780f1f0..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/settings.html
+++ /dev/null
@@ -1,1231 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>App Settings - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <meta name="description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/settings.html">
-    <meta property="og:title" content="App Settings - The MovieVerse">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/settings.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.webp"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="App Settings - The MovieVerse">
-    <meta name="twitter:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.webp"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .settings-container {
-            text-align: center;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .settings-section {
-            margin-bottom: 30px;
-            width: 80%;
-            max-width: 500px;
-        }
-        .settings-section select,
-        .settings-section input[type="color"] {
-            width: 100%;
-            padding: 10px;
-            border-radius: 5px;
-            border: 2px solid #7378c5;
-            background-color: #22254b;
-            color: white;
-            font-size: 16px;
-            margin-top: 10px;
-        }
-        .settings-section h2 {
-            color: #ff8623;
-            margin-bottom: 10px;
-        }
-        .settings-section label {
-            font-size: 20px;
-            color: #ff8623;
-            display: block;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #reset-button {
-            display: block;
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            font-size: 1rem;
-            border-radius: 8px;
-            cursor: pointer;
-            margin: 20px auto;
-        }
-        #reset-button:hover {
-            background-color: #7378c5;
-            transition: background-color 0.3s ease;
-        }
-        #search-results-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
-            margin-left: 25px;
-        }
-        #search-title {
-            margin: 0;
-        }
-        .button-group button {
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            font-size: 1rem;
-            border-radius: 8px;
-            cursor: pointer;
-            margin-right: 10px;
-        }
-        .button-group button:hover {
-            background-color: #7378c5;
-            transition: background-color 0.3s ease;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            #heading {
-                margin-top: -5px;
-            }
-            #my-heading {
-                margin-top: 25px !important;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .image-container {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            margin-bottom: 10px;
-            border-radius: 5px;
-            background-color: #7378c5;
-            text-align: center;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            cursor: pointer;
-        }
-        .image-container:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        .image-container img {
-            margin-left: 10px;
-            cursor: pointer;
-            border-radius: 5px;
-            transition: transform 0.2s;
-        }
-        .image-container img:hover {
-            transform: scale(1.1);
-        }
-        .image-container input[type="checkbox"] {
-            margin-right: 10px;
-        }
-        .image-name {
-            margin-left: 10px;
-            font-size: 1rem;
-            color: #fff;
-        }
-        #delete-selected-images-btn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-            display: inline-block;
-            font: inherit;
-            margin: 20px auto;
-        }
-        #delete-selected-images-btn:hover {
-            background-color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="heading">
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 5px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <main id="settings-container" class="settings-container" style="margin-bottom: 50px">
-        <!-- Background Setting -->
-        <div class="settings-section">
-            <h2>Change App Background</h2>
-            <select id="background-select" style="font: inherit">
-                <option style="font: inherit" value="../../images/universe-1.webp">Default</option>
-                <option style="font: inherit" value="../../images/universe-2.webp">Universe 1</option>
-                <option style="font: inherit" value="../../images/universe-22.webp">Universe 2</option>
-                <option style="font: inherit" value="../../images/universe-3.webp">Universe 3</option>
-                <option style="font: inherit" value="../../images/universe-4.webp">Universe 4</option>
-                <option style="font: inherit" value="../../images/universe-5.webp">Universe 5</option>
-                <option style="font: inherit" value="../../images/universe-6.webp">Universe 6</option>
-                <option style="font: inherit" value="../../images/universe-7.webp">Universe 7</option>
-                <option style="font: inherit" value="../../images/universe-8.webp">Universe 8</option>
-                <option style="font: inherit" value="../../images/universe-9.webp">Universe 9</option>
-                <option style="font: inherit" value="../../images/universe-10.webp">Universe 10</option>
-                <option style="font: inherit" value="../../images/universe-11.webp">Universe 11</option>
-                <option style="font: inherit" value="../../images/universe-12.webp">Universe 12</option>
-                <option style="font: inherit" value="../../images/universe-13.webp">Universe 13</option>
-                <option style="font: inherit" value="../../images/universe-14.webp">Universe 14</option>
-                <option style="font: inherit" value="../../images/universe-15.webp">Universe 15</option>
-                <option style="font: inherit" value="../../images/universe-16.webp">Universe 16</option>
-                <option style="font: inherit" value="../../images/universe-17.webp">Universe 17</option>
-                <option style="font: inherit" value="../../images/universe-18.webp">Universe 18</option>
-                <option style="font: inherit" value="../../images/universe-19.webp">Universe 19</option>
-                <option style="font: inherit" value="../../images/universe-20.webp">Universe 20</option>
-                <option style="font: inherit" value="../../images/universe-21.webp">Universe 21</option>
-                <option style="font: inherit" value="../../images/universe.webp">Universe 22</option>
-                <option style="font: inherit" value="../../images/universe-23.webp">Universe 23</option>
-                <option style="font: inherit" value="../../images/black.webp">Black</option>
-                <option style="font: inherit" value="../../images/grey.webp">Grey</option>
-                <option style="font: inherit" value="../../images/blue.webp">Blue</option>
-                <option style="font: inherit" value="../../images/silver.webp">Silver</option>
-                <option style="font: inherit" value="../../images/gold.webp">Gold</option>
-                <option style="font: inherit" value="../../images/rose.webp">Rose</option>
-                <option style="font: inherit" value="../../images/pink.webp">Pink</option>
-                <option style="font: inherit" value="../../images/red.webp">Red</option>
-                <option style="font: inherit" value="../../images/green.webp">Green</option>
-                <option style="font: inherit" value="../../images/brown.webp">Brown</option>
-                <option style="font: inherit" value="../../images/purple.webp">Purple</option>
-                <option style="font: inherit" value="../../images/orange.webp">Orange</option>
-                <option style="font: inherit" value="../../images/yellow.webp">Light Yellow</option>
-            </select>
-        </div>
-        <div class="settings-section">
-            <h2>Upload A Custom Background</h2>
-            <input type="file" id="custom-bg-upload" accept="image/*" style="margin-bottom: 10px; padding-left: 10px; font: inherit">
-            <input type="text" id="custom-bg-name" placeholder="Enter image name..." style="margin-bottom: 10px; font: inherit">
-            <div class="button-group">
-                <button id="upload-bg-btn" style="font: inherit">Upload</button>
-                <button id="delete-uploaded-btn" style="font: inherit">Delete Uploaded Images</button>
-            </div>
-        </div>
-        <div class="settings-section" id="delete-images-section" style="display: none;">
-            <h2>Select Images to Delete</h2>
-            <div id="custom-images-container"></div>
-            <button id="delete-selected-images-btn">Delete Selected Images</button>
-        </div>
-        <!-- Text Color Setting -->
-        <div class="settings-section">
-            <h2>Change Text Color</h2>
-            <label for="text-color-input">Text Color:</label>
-            <input type="color" style="min-height: 50px" id="text-color-input">
-        </div>
-        <!-- Font Size Setting -->
-        <div class="settings-section">
-            <h2>Change Font Size</h2>
-            <label style="font: inherit" for="font-size-select">Font Size:</label>
-            <select style="font: inherit" id="font-size-select">
-                <option style="font: inherit" value="small">Small</option>
-                <option style="font: inherit" value="medium" selected>Medium</option>
-                <option style="font: inherit" value="large">Large</option>
-            </select>
-        </div>
-        <button style="font: inherit" id="reset-button">Reset to Defaults</button>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 200px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/settings.js"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, span, div, button, input, select, textarea').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/sign-in.html b/MovieVerse-Mobile/platforms/ios/www/html/sign-in.html
deleted file mode 100644
index 40df0ef7..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/sign-in.html
+++ /dev/null
@@ -1,1077 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Sign In - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Sign In - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Sign In - The MovieVerse">
-    <meta name="twitter:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-        #local-time {
-            transform: translateX(12%);
-        }
-        .sign-in-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .sign-in-form-container h1 {
-            color: black;
-        }
-        .sign-in-form-container p {
-            color: black;
-        }
-        .sign-in-form-container input[type="email"],
-        .sign-in-form-container input[type="password"],
-        .sign-in-form-container input[type="text"],
-        .sign-in-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .sign-in-form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .sign-in-form-container button[type="button"] {
-            background-color: #f0f0f0;
-            color: #333;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #createAccountBtn:hover {
-            background-color: #d3d3d3;
-            color: #1B1B1B;
-        }
-        .sign-in-form-container button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .sign-in-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .sign-in-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-        header {
-            margin-top: -5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="sign-in-form-container" style="margin-bottom: 390px">
-        <form id="signInForm">
-            <h2>Sign In</h2>
-            <p>Sign in to save your stats, watchlists, get personalized movie recommendation, join our community, and more!</p>
-            <input type="email" id="signInEmail" placeholder="Email" required>
-            <input type="password" id="signInPassword" placeholder="Password" required>
-            <label style="margin-top: 10px; margin-bottom: 10px">
-                <input type="checkbox" id="togglePassword"> Show Password
-            </label>
-            <button type="submit">Sign In</button>
-            <button type="button" id="createAccountBtn">Create an Account</button>
-            <p>Forgot password? Click <a style="text-decoration: underline" id="githubLink1" href="reset-password.html">below</a> to reset it.</p>
-            <button type="button" id="resetPasswordBtn" onclick="window.location.href='reset-password.html'">Reset Password</button>
-        </form>
-    </div>
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('signInPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/sign-in.js" type="module"></script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/support.html b/MovieVerse-Mobile/platforms/ios/www/html/support.html
deleted file mode 100644
index a02e4a31..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/support.html
+++ /dev/null
@@ -1,1101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Support - The MovieVerse</title>
-    <meta name="description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/support.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/support.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta property="og:title" content="Support - The MovieVerse">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Support - The MovieVerse">
-    <meta name="twitter:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .form-container h1 {
-            color: #ff8623;
-        }
-        .form-container input,
-        .form-container textarea,
-        .form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .form-container button[type="submit"]:hover {
-            background-color: #ff8623;
-        }
-        .form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        #supportBtn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-            margin-top: 20px;
-        }
-        #supportBtn:hover {
-            background-color: #ff8623;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        @media (min-width: 900px) {
-            #my-heading {
-                margin-top: 15px !important;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body class="movie-details-body">
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="form-container">
-        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Contact Support</div>
-        <p style="color: black">Have a question or need help? Contact us and we'll take a look at your request as soon as possible.</p>
-        <form action="https://formspree.io/f/xdoqzzao" method="POST">
-            <input type="text" id="name" name="name" placeholder="Your Name" required>
-            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
-            <textarea id="message" name="message" placeholder="Your Message" required></textarea>
-            <button type="submit">Send Message</button>
-            <p style="color: black">Have a feedback for us? Or any suggestions to improve our app? Click the button below to be redirected to the feedback page.</p>
-        </form>
-        <button id="supportBtn" onclick="window.location.href='feedback.html'" title="Submit a feedback">Submit Feedback</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-
-    <footer style="margin-top: 400px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/terms-of-service.html b/MovieVerse-Mobile/platforms/ios/www/html/terms-of-service.html
deleted file mode 100644
index 23daac13..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/terms-of-service.html
+++ /dev/null
@@ -1,399 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Terms of Service - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta property="og:title" content="Terms of Service - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Terms of Service - The MovieVerse">
-    <meta name="twitter:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body, html {
-            margin: 0;
-            padding: 0;
-            overflow-x: hidden;
-        }
-        .content-area {
-            margin: 0 auto;
-            max-width: 800px;
-            padding: 0;
-            text-align: center;
-        }
-        #mail {
-            color: white;
-        }
-        #mail:hover {
-            color: #ff8623;
-            text-decoration: underline;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            header {
-                margin-top: -5px;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        h2 {
-            color: white;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#agreement">Agreement to Terms</a></li>
-            <li><a href="#consent">Changes to Terms</a></li>
-            <li><a href="#subheading2">Use of Service</a></li>
-            <li><a href="#subheading">Content</a></li>
-            <li><a href="#subheading3">Ads</a></li>
-            <li><a href="#subheading4">Accounts</a></li>
-            <li><a href="#subheading5">Intellectual Property</a></li>
-            <li><a href="#subheading6">Links To Other Web Sites</a></li>
-            <li><a href="#subheading7">Termination</a></li>
-            <li><a href="#subheading8">Disclaimer</a></li>
-            <li><a href="#subheading9">Governing Law</a></li>
-            <li><a href="#subheading10">Contact Us</a></li>
-            <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main class="content-area">
-        <div style="text-align: center; width: 90%">
-            <div style="font-weight: bold; font-size: 28px; margin-top: 10px; color: #ff8623" id="tos-header">Terms of Service</div>
-        </div>
-        <div style="text-align: center; width: 90%" id="agreement">
-            <h2 style="cursor: pointer">Agreement to Terms</h2>
-            <p>By using The MovieVerse, you agree to be bound by these terms. If you disagree with any part of the terms, then you do not have permission to access the service.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="consent">
-            <h2 style="cursor: pointer">Changes to Terms</h2>
-            <p>We reserve the right to modify or replace these Terms at any time at our sole discretion. We will try to provide at least 30 days' notice prior to any new terms taking effect.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading2">
-            <h2 style="cursor: pointer">Use of Service</h2>
-            <p>The MovieVerse is provided on an "AS IS" and "AS AVAILABLE" basis. The service is for personal, non-commercial use only.</p>
-            <p>You may not use the service for any illegal or unauthorized purpose. You must not, in the use of the service, violate any laws in your jurisdiction.</p>
-            <p>You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the service, use of the service, or access to the service without express written permission by us.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading">
-            <h2 style="cursor: pointer">Content</h2>
-            <p>Content found on or through this Service are the property of The MovieVerse or used with permission. You may not distribute, modify, transmit, reuse, download, repost, copy, or use said Content, whether in whole or in part, for commercial purposes or for personal gain, without express advance written permission from us.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading3">
-            <h2 style="cursor: pointer">Ads</h2>
-            <p>During use of the Service, you may enter into correspondence with or participate in promotions of advertisers or sponsors showing their goods or services through the Service. Any such activity, and any terms, conditions, warranties or representations associated with such activity, is solely between you and the applicable third-party.</p>
-            <p>We display ads on the Service to help us keep our servers and databases running and free for everyone. We're committed to placing non-intrusive ads only, which means no pop-ups, no auto-playing videos, and no ads that interfere with your experience on the site.</p>
-            <p>If you encounter any ads that are inappropriate, misleading, or intrusive, please let us know by contacting us at using the Feedback form <a style="color: white" href="feedback.html">here</a>.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading4">
-            <h2 style="cursor: pointer">Accounts</h2>
-            <p>When you create an account with us, you guarantee that the information you provide us is accurate, complete, and current at all times. Inaccurate, incomplete, or obsolete information may result in the immediate termination of your account on the Service.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading5">
-            <h2 style="cursor: pointer">Intellectual Property</h2>
-            <p>The Service and its original content, features, and functionality are and will remain the exclusive property of The MovieVerse and its licensors.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading6">
-            <h2 style="cursor: pointer">Links To Other Web Sites</h2>
-            <p>Our Service may contain links to third-party web sites or services that are not owned or controlled by The MovieVerse. We have no control over, and assume no responsibility for the content, privacy policies, or practices of any third-party web sites or services.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading7">
-            <h2 style="cursor: pointer">Termination</h2>
-            <p>We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of the Terms.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading8">
-            <h2 style="cursor: pointer">Disclaimer</h2>
-            <p>Your use of the Service is at your sole risk. The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading9">
-            <h2 style="cursor: pointer">Governing Law</h2>
-            <p>These Terms shall be governed and construed in accordance with the laws of the country where The MovieVerse is based (the United States of America), without regard to its conflict of law provisions.</p>
-            <p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
-        </div>
-        <div style="text-align: center; width: 90%; margin-bottom: 300px" id="subheading10">
-            <h2 style="cursor: pointer">Contact Us</h2>
-            <p>If you have any questions about these Terms, please contact us at <a id="mail" href="mailto:info@movie-verse.com">info@movie-verse.com</a>.</p>
-        </div>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script src="../js/terms-of-service.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/trivia.html b/MovieVerse-Mobile/platforms/ios/www/html/trivia.html
deleted file mode 100644
index d2bc5201..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/trivia.html
+++ /dev/null
@@ -1,1173 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>MovieVerse Trivia - Test Your Movie Knowledge</title>
-    <link rel="stylesheet" href="../css/trivia.css">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html">
-    <meta property="og:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
-    <meta name="twitter:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        label {
-            cursor: pointer;
-        }
-        label:hover {
-            color: #f509d9;
-        }
-        #my-heading {
-            margin-top: 25px;
-        }
-        @keyframes dropIn {
-            0% {
-                opacity: 0;
-                transform: translateY(-50px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: dropIn 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 0.5s;
-        }
-        #form {
-            margin-top: 16px;
-        }
-        @media (max-width: 600px) {
-            #my-heading {
-                margin-top: 10px;
-            }
-            #form {
-                margin-top: 0;
-            }
-        }
-        #ad-container1 {
-            display: block;
-        }
-        #githubLink {
-            color: white !important;
-        }
-        #githubLink:hover {
-            color: #ff8623 !important;
-            transition: 0.1s ease-in;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @media (min-width: 768px) {
-            #my-heading {
-                margin-top: 19px;
-            }
-            #form {
-                margin-top: 10px;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #local-time {
-            cursor: pointer;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1.5s;
-        }
-        #local-time p,
-        #local-time div {
-            opacity: 0;
-            animation: dropIn 1s ease forwards 2s;
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-bottom: -50px; margin-top: 9px">
-        <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 215px" class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="#0">Question 1</a></li>
-            <li><a href="#1">Question 2</a></li>
-            <li><a href="#2">Question 3</a></li>
-            <li><a href="#3">Question 4</a></li>
-            <li><a href="#4">Question 5</a></li>
-            <li><a href="#5">Question 6</a></li>
-            <li><a href="#6">Question 7</a></li>
-            <li><a href="#7">Question 8</a></li>
-            <li><a href="#8">Question 9</a></li>
-            <li><a href="#9">Question 10</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <div>
-        <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
-    </div>
-    <div id="result-modal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3>Trivia Results</h3>
-                <span class="close-button" title="Close the trivia results modal">&times;</span>
-            </div>
-            <div id="progress-circle" class="progress-circle">
-                <div id="correct-answers"></div>
-            </div>
-            <p id="result-text"></p>
-        </div>
-    </div>
-    <main id="main"></main>
-    <form id="quiz-form" style="margin-bottom: 50px">
-        <div id="quiz-container"></div>
-        <button type="button" id="regenerate-questions" class="button" style="color: black">Get New Questions</button>
-        <button type="submit" id="submit" class="button" style="color: black">Submit Answers</button>
-    </form>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0; color: white">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="color: white; margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/quiz.js" type="module"></script>
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p id="footerP" style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" id="back-top">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-
-        document.getElementById('back-top').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/tv-details.html b/MovieVerse-Mobile/platforms/ios/www/html/tv-details.html
deleted file mode 100644
index 6898fd09..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/tv-details.html
+++ /dev/null
@@ -1,938 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>TV Series Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/tv-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="TV Series Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="TV Series Details - The MovieVerse">
-    <meta name="twitter:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #rating {
-            color: white !important;
-        }
-        #rating:hover {
-            color: #ff8623 !important;
-        }
-        #favorite-btn:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        .favorited:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #homepage {
-            color: white;
-        }
-        #homepage:hover {
-            color: #ff8623;
-        }
-        #prod-companies {
-            color: white;
-        }
-        #prod-companies:hover {
-            color: #ff8623;
-        }
-        header {
-            margin-top: 9px;
-        }
-        @media (max-width: 600px) {
-            #my-heading {
-                margin-top: 10px;
-            }
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            header {
-                margin-top: -5px;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .cast-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-        }
-        .cast-member-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            margin: 5px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .cast-member-image {
-            width: 100%;
-            height: 155px;
-            object-fit: cover !important;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .cast-member-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .cast-member-details {
-            width: 100%;
-        }
-        .cast-member-name, .cast-member-role {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-            white-space: normal;
-            text-align: center;
-        }
-        .similar-tv-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-        }
-        .similar-tv-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .similar-tv-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .similar-tv-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .similar-tv-name {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-        .similar-tv-link {
-            text-decoration: none;
-            color: #333;
-        }
-        #movie-details-container {
-            margin-top: 20px;
-        }
-        @media (max-width: 767px) {
-            #movie-details-container {
-                margin-top: 0;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-    <main id="main" style="margin-left: 35px; height: 0"></main>
-    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px;">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading TV Series Details..." style="width: 25vw; border-radius: 8px" title="Click to view full-size image" />
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
-            <div id="comments-section">
-                <h3>TV Show Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Comments Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This TV Series</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
-                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this TV series">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right" style="position: relative; overflow: hidden">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/tv-details.js"></script>
-    <script src="../js/add-to-tv-favorites.js" type="module"></script>
-    <script type="module">
-        import { toggleFavoriteTVSeries, checkAndUpdateFavoriteButtonTVSeries } from '../js/add-to-tv-favorites.js';
-        document.addEventListener('DOMContentLoaded', () => {
-            const favoriteBtn = document.getElementById('favorite-btn');
-            if (favoriteBtn) {
-                favoriteBtn.addEventListener('click', toggleFavoriteTVSeries);
-            }
-        });
-        checkAndUpdateFavoriteButtonTVSeries();
-    </script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('movie-image').addEventListener('click', function() {
-            let imageUrl = this.src.replace('w780', 'w1280');
-            const modalHtml = `<div id="image-modal" style="z-index: 10000002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                    <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="TV Series Poster" />
-                                    <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                               </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-    <script src="../js/comments-tv.js" type="module"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/html/user-profile.html b/MovieVerse-Mobile/platforms/ios/www/html/user-profile.html
deleted file mode 100644
index 98b22596..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/html/user-profile.html
+++ /dev/null
@@ -1,1337 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>User Profile - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="User Profile - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html" />
-    <meta property="og:site_name" content="User Profile - The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="User Profile - The MovieVerse">
-    <meta name="twitter:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        h1 {
-            color: #ff8623;
-        }
-        h1:hover {
-            color: #f509d9;
-            transition: 0.1s ease;
-        }
-        .profile-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .profile-container input[type="text"],
-        .profile-container input[type="date"],
-        .profile-container input[type="file"],
-        .profile-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .profile-container button {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .profile-container button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .profile-container h2, .profile-container p {
-            color: black;
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgba(0,0,0,0.4);
-            padding-top: 60px;
-        }
-        .modal-content {
-            background-color: #fefefe;
-            margin: 5% auto;
-            padding: 20px;
-            border: 1px solid #888;
-            width: 80%;
-            max-width: 400px;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(5px);
-        }
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-        .close:hover,
-        .close:focus {
-            color: #ff8623;
-            text-decoration: none;
-            cursor: pointer;
-        }
-        #editProfileModal {
-            z-index: 1000;
-            width: 100vw !important;
-        }
-        #editProfileModal .modal-content {
-            background-color: #373b69;
-            width: 400px !important;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
-        }
-        #editProfileForm input {
-            font: inherit;
-            border-radius: 8px;
-        }
-        #editProfileForm button {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #editProfileForm button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .modal-header h2 {
-            margin: 0;
-            flex-grow: 1;
-        }
-        .modal-content {
-            padding-bottom: 20px;
-        }
-        .dob-container {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-        .dob-container label {
-            margin-right: 10px;
-            margin-top: 10px;
-            color: black;
-        }
-        .dob-container input[type="date"] {
-            flex-grow: 1;
-        }
-        .profile-image-container {
-            position: relative;
-            display: inline-block;
-        }
-        #removeProfileImage {
-            position: absolute;
-            top: 0;
-            background: none;
-            border: none;
-            color: red;
-            font-size: 30px;
-            font-weight: bold;
-            cursor: pointer;
-            padding: 0;
-            line-height: 1;
-            margin: 0;
-        }
-        #removeProfileImage:hover {
-            color: #ff8623;
-        }
-        #editProfileForm .modal-content h2 {
-            color: #ff8623;
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        #editProfileForm .modal-content label {
-            color: #fff;
-            margin-bottom: 10px;
-            display: block;
-        }
-        #editProfileForm .modal-content input[type="text"],
-        #editProfileForm .modal-content textarea {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            border: 1px solid #7378c5;
-            background-color: #22254b;
-            color: #fff;
-        }
-        #editProfileForm .modal-content button {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font: inherit;
-            display: block;
-            margin: 10px auto;
-            transition: background-color 0.3s ease;
-        }
-        #editProfileForm .modal-content select {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            border: 1px solid #7378c5;
-            background-color: #22254b;
-            color: #fff;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0 !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script src="../js/user-profile.js" type="module"></script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div id="welcomeMessage" style="color: #ff8623; font-weight: bold; font-size: 30px; text-align: center; margin-top: 30px;"></div>
-    <div class="search-users-container" id="search-users-container">
-        <input type="text" id="searchUserInput" placeholder="Search For Any MovieVerse User..." title="Remember that this search is case-sensitive!" />
-        <button id="searchUserBtn">Search</button>
-    </div>
-    <div id="searchUserResults" class="search-results-container"></div>
-    <button id="viewMyProfileBtn" style="margin-top: 20px;">View My Profile</button>
-    <div id="profileContainer" class="profile-container">
-        <div class="profile-image-container">
-            <img id="profileImage" style="cursor: pointer" title="Click to upload a new profile image" onclick="document.getElementById('imageUpload').click()" src="../../images/user-default.png" alt="Profile Image" />
-            <button id="removeProfileImage" title="Click to remove the current profile image" style="display: none;">&times;</button>
-        </div>
-        <input type="file" id="imageUpload" accept="image/*" hidden />
-        <button id="changeProfileImageBtn" onclick="document.getElementById('imageUpload').click()">Change Profile Image</button>
-        <div class="profile-info">
-            <div id="averageDisplays" style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
-                <div class="progress-container" id="container1" style="cursor: pointer">
-                    <svg class="progress-ring" width="100" height="100">
-                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
-                        <circle class="progress-ring__progress" id="avgMovieRatingCircle" cx="50" cy="50" r="40" />
-                        <text class="progress-ring__text" id="avgMovieRatingText" x="50" y="50"></text>
-                    </svg>
-                    <p><strong>Average Movie Rating</strong></p>
-                </div>
-                <div class="progress-container" id="container2" style="cursor: pointer">
-                    <svg class="progress-ring" width="100" height="100">
-                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
-                        <circle class="progress-ring__progress" id="avgTriviaScoreCircle" cx="50" cy="50" r="40" />
-                        <text class="progress-ring__text" id="avgTriviaScoreText" x="50" y="50"></text>
-                    </svg>
-                    <p><strong>Average Movie Trivia Score</strong></p>
-                </div>
-            </div>
-            <p id="usernameDisplay">Username: <span></span></p>
-            <p id="dobDisplay">Date of Birth: <span></span></p>
-            <p id="bioDisplay">Bio: <span></span></p>
-            <p id="favoriteGenresDisplay">Favorite Genres: <span></span></p>
-            <p id="locationDisplay">Location: <span></span></p>
-            <p id="favoriteMovieDisplay">Favorite Movie: <span></span></p>
-            <p id="hobbiesDisplay">Hobbies: <span></span></p>
-            <p id="favoriteActorDisplay"><strong>Favorite Actor:</strong> <span></span></p>
-            <p id="favoriteDirectorDisplay"><strong>Favorite Director:</strong> <span></span></p>
-            <p id="personalQuoteDisplay"><strong>Personal Quote:</strong> <span></span></p>
-            <p id="followingDisplay"><strong>Following:</strong> <span id="followingList"></span></p>
-            <p id="followersDisplay"><strong>Followers:</strong> <span id="followersList"></span></p>
-        </div>
-        <button id="editProfileBtn">Edit Profile Details</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <p id="signInPrompt" style="text-align: center; font-size: 24px; margin-top: 100px;"></p>
-    <div id="editProfileModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header" style="margin-bottom: 20px">
-                <h2>Edit Profile Details</h2>
-                <span class="close" onclick="closeModal()">&times;</span>
-            </div>
-            <form id="editProfileForm">
-                <div style="text-align: center">
-                    <label for="editUsername" style="color: white">Username:</label>
-                    <input type="text" id="editUsername" placeholder="Username">
-                </div>
-                <div style="text-align: center">
-                    <label for="editDob" style="color: white">Date of Birth:</label>
-                    <input type="date" id="editDob" style="padding-left: 5px; width: 100%" placeholder="Date of Birth" title="Click to select your date of birth"/>
-                </div>
-                <div style="text-align: center; margin-top: 20px">
-                    <label for="editBio" style="color: white">Bio:</label>
-                    <input type="text" id="editBio" placeholder="Bio">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteGenres" style="color: white">Favorite Genres:</label>
-                    <input type="text" id="editFavoriteGenres" placeholder="Favorite Genres">
-                </div>
-                <div style="text-align: center">
-                    <label for="editLocation" style="color: white">Location:</label>
-                    <input type="text" id="editLocation" placeholder="Location">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteMovie" style="color: white">Favorite Movie:</label>
-                    <input type="text" id="editFavoriteMovie" placeholder="Favorite Movie">
-                </div>
-                <div style="text-align: center">
-                    <label for="editHobbies" style="color: white">Hobbies:</label>
-                    <input type="text" id="editHobbies" placeholder="Hobbies">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteActor" style="color: white">Favorite Actor:</label>
-                    <input type="text" id="editFavoriteActor" placeholder="Favorite Actor">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteDirector" style="color: white">Favorite Director:</label>
-                    <input type="text" id="editFavoriteDirector" placeholder="Favorite Director">
-                </div>
-                <div style="text-align: center">
-                    <label for="editPersonalQuote" style="color: white">Personal Quote:</label>
-                    <input type="text" id="editPersonalQuote" placeholder="Personal Quote">
-                </div>
-                <button type="button" id="saveChanges">Save Changes</button>
-                <button type="button" id="cancelEdit" onclick="closeModal()">Cancel</button>
-            </form>
-        </div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        let today = new Date();
-        today.setFullYear(today.getFullYear() - 18);
-        let year = today.getFullYear();
-        let month = (today.getMonth() + 1).toString().padStart(2, '0');
-        let day = today.getDate().toString().padStart(2, '0');
-        let dateMinus18Years = `${year}-${month}-${day}`;
-        document.getElementById('editDob').value = dateMinus18Years;
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-    <footer style="margin-top: 800px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/index.html b/MovieVerse-Mobile/platforms/ios/www/index.html
index cbd545c2..cb97d18f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/index.html
+++ b/MovieVerse-Mobile/platforms/ios/www/index.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -48,12 +47,10 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" as="style">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
-
     <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-
     <!-- Schema.org markup for Rich Results -->
     <script type="application/ld+json">
         {
@@ -114,7 +111,6 @@
             "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
         }
     </script>
-
     <style>
         @font-face {
             font-family: 'Poppins';
@@ -585,7 +581,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <ul id="newReleasesList"></ul>
         </div>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 10000000">
         <a id="heading-href" class="notranslate" style="cursor: pointer; text-align: center">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px !important; font-size: 2.1em; font-weight: bold;">
@@ -629,7 +624,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <li><a href="MovieVerse-Frontend/html/feedback.html">MovieVerse Feedback</a></li>
         </ul>
     </nav>
-
     <div class="mobile-sign-in-container">
         <button id="mobileGoogleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="mobileSignInOutText">Sign In</span>
@@ -641,17 +635,14 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <i class="fas fa-user" id="mobileProfileIcon"></i>
         </button>
     </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <div class="genres">
         <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2>
     </div>
     <div id="most-popular-pagination" class="pagination" style="text-align: center"></div>
     <main id="most-popular"></main>
-
     <div id="ad-container3" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -665,7 +656,6 @@ <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="recommendedDIV">
         <h2 id="other" style="cursor: pointer" title="Here are some personalized movie suggestions we've generated based on your preferences! Check them out, and let us know what you think!">
             Recommended For You: Personalized Movie Suggestions
@@ -673,7 +663,6 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     </div>
     <div id="recommended-pagination" class="pagination" style="text-align: center"></div>
     <main id="recommended"></main>
-
     <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -686,13 +675,11 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="award-winning-div">
         <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning Movies</h2>
     </div>
     <div id="award-winning-pagination" class="pagination" style="text-align: center"></div>
     <main id="award-winning"></main>
-
     <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -705,13 +692,11 @@ <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
         <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; margin-right: 10px; margin-top: 25px; cursor: pointer;">Change Director</button>
     </div>
     <main id="director-spotlight"></main>
-
     <div id="ad-container5" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -724,13 +709,11 @@ <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="action-div">
         <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</h2>
     </div>
     <div id="action-pagination" class="pagination" style="text-align: center"></div>
     <main id="action"></main>
-
     <div id="ad-container6" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -743,13 +726,11 @@ <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="vietnamese-div">
         <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese Movies</h2>
     </div>
     <div id="vietnamese-pagination" class="pagination" style="text-align: center"></div>
     <main id="vietnamese"></main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -762,13 +743,11 @@ <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="indian-div">
         <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian Movies</h2>
     </div>
     <div id="indian-pagination" class="pagination" style="text-align: center"></div>
     <main id="indian"></main>
-
     <div id="ad-container4" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -781,13 +760,11 @@ <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="korean-div">
         <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies</h2>
     </div>
     <div id="korean-pagination" class="pagination" style="text-align: center"></div>
     <main id="korean"></main>
-
     <div id="ad-container7" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -800,115 +777,96 @@ <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies<
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="tv-series-div">
         <h2 id="other" style="cursor: pointer">Binge-Worthy Series: Trending TV Series</h2>
     </div>
     <div id="tv-series-pagination" class="pagination" style="text-align: center"></div>
     <main id="tv-series" ></main>
-
     <div class="genres" id="hidden-gems-div">
         <h2 id="other" style="cursor: pointer">Hidden Treasures: Discover Gems in Cinema</h2>
     </div>
     <div id="hidden-gems-pagination" class="pagination" style="text-align: center"></div>
     <main id="hidden-gems"></main>
-
     <div class="genres" id="horror-div">
         <h2 id="other" style="cursor: pointer">Scream Queens & Slashers: Trending Horror Movies</h2>
     </div>
     <div id="horror-pagination" class="pagination" style="text-align: center"></div>
     <main id="horror"></main>
-
     <div class="genres" id="documentary-div">
         <h2 id="other" style="cursor: pointer">Real Stories: Trending Documentary Movies</h2>
     </div>
     <div id="documentary-pagination" class="pagination" style="text-align: center"></div>
     <main id="documentary" ></main>
-
     <div class="genres" id="animation-div">
         <h2 id="other" style="cursor: pointer">Animated Adventures: Trending Animated Movies</h2>
     </div>
     <div id="animation-pagination" class="pagination" style="text-align: center"></div>
     <main id="animation"></main>
-
     <div class="genres" id="sci-fi-div">
         <h2 id="other" style="cursor: pointer">Future Visions: Trending Science Fiction Movies</h2>
     </div>
     <div id="sci-fi-pagination" class="pagination" style="text-align: center"></div>
     <main id="sci-fi"></main>
-
     <div class="genres" id="western-div">
         <h2 id="other" style="cursor: pointer">Wild West: Trending Western Movies</h2>
     </div>
     <div id="western-pagination" class="pagination" style="text-align: center"></div>
     <main id="western"></main>
-
     <div class="genres" id="romantic-div">
         <h2 id="other" style="cursor: pointer">Love Is in the Air: Trending Romantic Movies</h2>
     </div>
     <div id="romantic-pagination" class="pagination" style="text-align: center"></div>
     <main id="romantic"></main>
-
     <div class="genres" id="thriller-div">
         <h2 id="other" style="cursor: pointer">Edge of Your Seat: Trending Thriller Movies</h2>
     </div>
     <div id="thriller-pagination" class="pagination" style="text-align: center"></div>
     <main id="thriller"></main>
-
     <div class="genres" id="war-div">
         <h2 id="other" style="cursor: pointer">War Stories: Trending War Movies</h2>
     </div>
     <div id="war-pagination" class="pagination" style="text-align: center"></div>
     <main id="war"></main>
-
     <div class="genres" id="mystery-div">
         <h2 id="other" style="cursor: pointer">Whodunit? Mystery & Intrigue in Trending Mystery Movies</h2>
     </div>
     <div id="mystery-pagination" class="pagination" style="text-align: center"></div>
     <main id="mystery"></main>
-
     <div class="genres" id="crime-div">
         <h2 id="other" style="cursor: pointer">Underworld Tales: Trending Crime Movies</h2>
     </div>
     <div id="crime-pagination" class="pagination" style="text-align: center"></div>
     <main id="crime"></main>
-
     <div class="genres" id="comedy-div">
         <h2 id="other" style="cursor: pointer">Laughs Galore: Trending Comedy Movies</h2>
     </div>
     <div id="comedy-pagination" class="pagination" style="text-align: center"></div>
     <main id="comedy"></main>
-
     <div class="genres" id="fantasy-div">
         <h2 id="other" style="cursor: pointer">Other Worlds: Trending Fantasy Movies</h2>
     </div>
     <div id="fantasy-pagination" class="pagination" style="text-align: center"></div>
     <main id="fantasy"></main>
-
     <div class="genres" id="family-div">
         <h2 id="other" style="cursor: pointer">Family Fun Time: Trending Family Movies</h2>
     </div>
     <div id="family-pagination" class="pagination" style="text-align: center"></div>
     <main id="family"></main>
-
     <div class="genres" id="musical-div">
         <h2 id="other" style="cursor: pointer">Enchanting Melodies: Trending Musical Movies</h2>
     </div>
     <div id="musical-pagination" class="pagination" style="text-align: center"></div>
     <main id="musical"></main>
-
     <div class="genres" id="drama-div">
         <h2 id="other" style="cursor: pointer">Emotional Journeys: Trending Drama Movies</h2>
     </div>
     <div id="drama-pagination" class="pagination" style="text-align: center"></div>
     <main id="drama"></main>
-
     <div class="genres" id="classic-div">
         <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movies</h2>
     </div>
     <div id="classic-pagination" class="pagination" style="text-align: center"></div>
     <main id="classic"></main>
-
     <button id="chat-button" onclick="window.location.href='MovieVerse-Frontend/html/chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
     <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
@@ -917,7 +875,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
     <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="MovieVerse-Frontend/html/chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -952,23 +909,19 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             <span>Top</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <footer style="margin-top: 40px">
         <p id="footer">© 2024 The MovieVerse. All rights reserved.</p>
         <p>Learn more <a href="MovieVerse-Frontend/html/about.html" id="githubLink10">about The MovieVerse</a> and <a href="MovieVerse-Frontend/html/notifications.html" id="githubLink8">what we offer.</a></p>
         <p style="font-size: 0.1px">View our demos at: <a href="MovieVerse-Frontend/html/inception.html" id="githubLink11">Inception</a>, <a href="MovieVerse-Frontend/html/christopher-nolan.html" id="githubLink16">Christopher Nolan</a>, <a href="MovieVerse-Frontend/html/leonardo-dicaprio.html" id="githubLink9">Leonardo DiCaprio</a>, use our <a href="MovieVerse-Frontend/html/chat.html" id="githubLink14">chat application</a>, or explore the <a href="MovieVerse-Frontend/html/user-profile.html" id="githubLink5">profile feature</a>!</p>
     </footer>
-
     <div id="google_translate_element"></div>
     <div id="translate_control">
         <div class="translate-trigger">Translate</div>
     </div>
-
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
         function googleTranslateElementInit() {
diff --git a/MovieVerse-Mobile/www/css/index.css b/MovieVerse-Mobile/www/css/index.css
deleted file mode 100644
index ecea7e8e..00000000
--- a/MovieVerse-Mobile/www/css/index.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-* {
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-}
-
-body {
-    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-    background-color:#E4E4E4;
-    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
-    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
-    font-size:12px;
-    height:100vh;
-    margin:0px;
-    padding:0px;
-    /* Padding to avoid the "unsafe" areas behind notches in the screen */
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
-    text-transform:uppercase;
-    width:100%;
-}
-
-/* Portrait layout (default) */
-.app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
-    text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
-}
-
-/* Landscape layout (with min-width) */
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
-    .app {
-        background-position:left center;
-        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
-        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
-                                      /* offset horizontal: half of image width and text area width */
-    }
-}
-
-h1 {
-    font-size:24px;
-    font-weight:normal;
-    margin:0px;
-    overflow:visible;
-    padding:0px;
-    text-align:center;
-}
-
-.event {
-    border-radius:4px;
-    color:#FFFFFF;
-    font-size:12px;
-    margin:0px 30px;
-    padding:2px 0px;
-}
-
-.event.listening {
-    background-color:#333333;
-    display:block;
-}
-
-.event.received {
-    background-color:#4B946A;
-    display:none;
-}
-
-#deviceready.ready .event.listening { display: none; }
-#deviceready.ready .event.received { display: block; }
-
-@keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
-
-.blink {
-    animation:fade 3000ms infinite;
-    -webkit-animation:fade 3000ms infinite;
-}
-
-
-@media screen and (prefers-color-scheme: dark) {
-    body {
-        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
-    }
-}
diff --git a/MovieVerse-Mobile/www/css/index.scss b/MovieVerse-Mobile/www/css/index.scss
deleted file mode 100644
index 786e8d13..00000000
--- a/MovieVerse-Mobile/www/css/index.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-$font-family-poppins: "Poppins", sans-serif;
-$background-color-primary: #7378c5;
-$hover-color: #ff8623;
-$link-color: white;
-$link-hover-color: #f509d9;
-
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background: url("../../images/universe-1.png") no-repeat center center fixed;
-  background-size: cover;
-  font-family: $font-family-poppins;
-  margin: 0;
-  align-content: center;
-  overflow-x: hidden;
-  min-height: 100vh;
-  overflow-y: auto;
-}
-
-%button-style {
-  background-color: $background-color-primary;
-  color: black;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  &:hover {
-    background-color: $hover-color;
-    transition: 0.3s ease-in;
-  }
-}
-
-#movie-match-btn {
-  @extend %button-style;
-  position: fixed;
-  bottom: 220px;
-  right: 20px;
-}
-
-#submit-comment {
-  @extend %button-style;
-  padding: 10px 15px;
-}
-
-%link-style {
-  color: $link-color;
-  text-decoration: underline;
-  &:hover {
-    color: $link-hover-color;
-  }
-}
-
-#cast-info, #similar-tv, #director-link {
-  @extend %link-style;
-}
-
-@mixin modal-style {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  margin-top: 5px;
-}
-
-.modal-header {
-  @include modal-style;
-}
-
-.comments-controls {
-  display: flex;
-  align-items: center;
-  button:disabled {
-    cursor: not-allowed;
-  }
-  &.justify-start {
-    justify-content: start;
-  }
-  &.justify-center {
-    justify-content: center;
-    gap: 10px;
-    width: 100%;
-  }
-}
diff --git a/MovieVerse-Mobile/www/css/navbar.scss b/MovieVerse-Mobile/www/css/navbar.scss
deleted file mode 100644
index 6ff9d8ec..00000000
--- a/MovieVerse-Mobile/www/css/navbar.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-$breakpoint-mobile: 480px;
-$breakpoint-tablet: 768px;
-$breakpoint-desktop: 1024px;
-
-$navbar-background-color: #333;
-$navbar-text-color: #fff;
-$navbar-hover-color: #555;
-$mobile-menu-background-color: #222;
-
-@mixin responsive-visibility {
-  @media (max-width: $breakpoint-mobile) {
-    display: none;
-  }
-}
-
-.navbar {
-  background-color: $navbar-background-color;
-  color: $navbar-text-color;
-  padding: 1em;
-
-  .logo {
-    float: left;
-    font-size: 1.5em;
-    margin-right: 15px;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    float: right;
-
-    li {
-      display: inline;
-      margin-left: 15px;
-
-      a {
-        text-decoration: none;
-        color: $navbar-text-color;
-
-        &:hover {
-          color: $navbar-hover-color;
-        }
-      }
-    }
-  }
-
-  @media (max-width: $breakpoint-tablet) {
-    ul {
-      float: none;
-      text-align: center;
-
-      li {
-        display: block;
-        margin-top: 0.5em;
-      }
-    }
-  }
-}
-
-.mobile-menu-btn {
-  @include responsive-visibility;
-
-  display: inline-block;
-  background-color: $mobile-menu-background-color;
-  color: $navbar-text-color;
-  padding: 10px;
-  border: none;
-  cursor: pointer;
-}
-
-.mobile-menu {
-  display: none;
-
-  &.active {
-    display: block;
-    padding: 10px;
-    background-color: $mobile-menu-background-color;
-
-    ul {
-      text-align: center;
-
-      li {
-        margin-top: 10px;
-
-        a {
-          display: block;
-          color: $navbar-text-color;
-
-          &:hover {
-            background-color: $navbar-hover-color;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/MovieVerse-Mobile/www/css/profile.scss b/MovieVerse-Mobile/www/css/profile.scss
deleted file mode 100644
index 78f9b2e3..00000000
--- a/MovieVerse-Mobile/www/css/profile.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-$primary-color: #4A90E2;
-$secondary-color: #50E3C2;
-$text-color: #4A4A4A;
-$background-color: #F5F7FA;
-$padding-standard: 15px;
-$border-radius-standard: 5px;
-
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin card-style {
-  background-color: white;
-  border-radius: $border-radius-standard;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  padding: $padding-standard;
-}
-
-body {
-  font-family: 'Poppins', sans-serif;
-  color: $text-color;
-  background-color: $background-color;
-}
-
-a {
-  color: $primary-color;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.profile-container {
-  @include flex-center;
-  flex-direction: column;
-}
-
-.profile-header {
-  @include flex-center;
-  flex-direction: column;
-  margin-bottom: 20px;
-
-  .profile-image {
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    margin-bottom: $padding-standard;
-  }
-
-  .profile-name {
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  .profile-bio {
-    text-align: center;
-    margin-top: $padding-standard;
-  }
-}
-
-.profile-content {
-  @include card-style;
-  margin: 20px auto;
-  width: 90%;
-  max-width: 600px;
-
-  .section {
-    &:not(:last-child) {
-      margin-bottom: 20px;
-    }
-
-    h2 {
-      border-bottom: 2px solid $primary-color;
-      padding-bottom: $padding-standard / 2;
-    }
-
-    p, ul {
-      margin-top: $padding-standard / 2;
-    }
-  }
-}
diff --git a/MovieVerse-Mobile/www/css/reset.css b/MovieVerse-Mobile/www/css/reset.css
deleted file mode 100644
index 7a836fce..00000000
--- a/MovieVerse-Mobile/www/css/reset.css
+++ /dev/null
@@ -1,43 +0,0 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
diff --git a/MovieVerse-Mobile/www/css/style.css b/MovieVerse-Mobile/www/css/style.css
deleted file mode 100644
index f24d2b24..00000000
--- a/MovieVerse-Mobile/www/css/style.css
+++ /dev/null
@@ -1,4087 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-Light.ttf') format('truetype');
-    font-weight: 200;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-body {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    font-family: "Poppins", sans-serif;
-    margin: 0;
-    align-content: center;
-    overflow-x: hidden;
-    min-height: 100vh;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-}
-
-#heading-href {
-    text-decoration: none;
-}
-
-.cast-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.cast-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    width: 115px;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-.cast-image {
-    width: 100%;
-    height: 155px;
-    object-fit: cover;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.cast-item:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.cast-details {
-    width: 100%;
-}
-
-.actor-name, .actor-role {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-    white-space: normal;
-    text-align: center;
-}
-
-.actor-role {
-    font-style: italic;
-}
-
-.last-episode {
-    flex-direction: column;
-    align-items: center;
-    display: inline-block;
-}
-
-.last-episode strong {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.last-episode-image-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.last-episode-image {
-    max-width: 220px;
-    height: auto;
-    border-radius: 5px;
-}
-
-.last-episode-image:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.director-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.director-list {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.director-link {
-    display: flex;
-    align-items: center;
-    text-align: center;
-}
-
-.director-link .cast-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.director-link .cast-image {
-    width: 100%;
-    height: 155px;
-    margin-bottom: 5px;
-}
-
-.director-link .actor-name {
-    font-size: 12px;
-}
-
-.creators-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.creator-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    width: 115px;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-.creator-image {
-    width: 100%;
-    height: 155px;
-    object-fit: cover !important;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.creator-item:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.creator-details {
-    width: 100%;
-}
-
-.creator-name {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-}
-
-#movie-match-btn {
-    position: fixed;
-    bottom: 220px;
-    right: 20px;
-    background-color: #7378c5;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#user-name {
-    font: inherit;
-    border-radius: 8px;
-}
-
-#user-comment {
-    font: inherit;
-    border-radius: 8px;
-}
-
-#submit-comment {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-}
-
-#submit-comment:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.comments-controls {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-}
-
-button:disabled {
-    cursor: not-allowed;
-}
-
-.comments-controls {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-}
-
-#cast-info {
-    color: white;
-    text-decoration: underline;
-}
-
-#cast-info:hover {
-    color: #ff8623;
-}
-
-#similar-tv {
-    color: white;
-    text-decoration: underline;
-}
-
-#similar-tv:hover {
-    color: #ff8623;
-}
-
-#director-link {
-    color: white;
-    text-decoration: underline;
-}
-
-#director-link:hover {
-    color: #ff8623;
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 10px;
-    margin-top: 5px;
-}
-
-#toggle-filters-btn {
-    margin: 10px;
-    background-color: #7378c5;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.3s ease;
-    padding: 10px 20px;
-    font: inherit;
-}
-
-#toggle-filters-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease;
-}
-
-#movie-tv-filters, #people-filters, #tv-filters {
-    max-width: 500px;
-    margin: 4px auto;
-    padding: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    border: 2px solid #7378c5;
-    min-width: 290px;
-}
-
-#movie-tv-filters label, #movie-tv-filters select, #movie-tv-filters input[type="number"], #movie-tv-filters input[type="range"],
-#people-filters label, #people-filters select, #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters label, #tv-filters select, #tv-filters input[type="range"], #tv-filters input[type="number"] {
-    display: block;
-    width: 100%;
-    margin-bottom: 10px;
-    font-family: "Poppins", sans-serif;
-    color: #fff;
-}
-
-#movie-tv-filters label, #people-filters label, #tv-filters label {
-    margin-bottom: 5px;
-    font-size: 1rem;
-}
-
-#movie-tv-filters select, #people-filters select, #tv-filters select {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-tv-filters select:hover, #people-filters select:hover, #tv-filters select:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#movie-tv-filters select:focus, #people-filters select:focus, #tv-filters select:focus {
-    background-color: #7378c5;
-}
-
-#movie-tv-filters select:focus option:hover, #people-filters select:focus option:hover, #tv-filters select:focus option:hover {
-    background-color: #ff8623;
-}
-
-#movie-tv-filters input[type="number"], #people-filters input[type="range"], #people-filters input[type="number"], #tv-filters input[type="range"], #tv-filters input[type="number"] {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-tv-filters input[type="number"]:hover, #people-filters input[type="range"]:hover, #people-filters input[type="number"]:hover, #tv-filters input[type="range"]:hover, #tv-filters input[type="number"]:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#reset-filters {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 25px;
-    border: none;
-    cursor: pointer;
-    color: white;
-    padding: 10px 15px;
-    margin-top: 30px;
-    display: block;
-    width: 100%;
-}
-
-#reset-filters:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#rating-filter {
-    vertical-align: top;
-}
-
-#movie-tv-filters span, #people-filters span {
-    font-weight: bold;
-    margin-left: 10px;
-}
-
-input[type=range] {
-    cursor: pointer;
-}
-
-#rating-value {
-    font: inherit;
-}
-
-.modal-header h3 {
-    flex-grow: 1;
-    text-align: center;
-    margin: 0;
-}
-
-.close {
-    cursor: pointer;
-    position: absolute;
-    right: 10px;
-}
-
-#year-filter::placeholder {
-    color: white;
-}
-
-#year-tv-filter::placeholder {
-    color: white;
-}
-
-#toggle-comment-modal, #prev-page, #next-page {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    color: white;
-}
-
-#toggle-comment-modal:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#prev-page:disabled, #next-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-#prev-page:disabled, #next-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-#prev-page:hover, #next-page:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#comments-section h3 {
-    text-align: center;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    padding-top: 100px;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0, 0, 0);
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-.modal-content {
-    position: relative;
-    background-color: #fefefe;
-    margin: auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    max-width: 500px;
-    border-radius: 10px;
-}
-
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-p {
-    text-align: center;
-    color: #a6967e;
-}
-
-.button2 {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    right: 18px;
-    position: absolute;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-}
-
-html {
-    scroll-behavior: smooth;
-    overflow-x: hidden;
-}
-
-.main2 {
-    text-align: center;
-    color: orange;
-    scroll-behavior: smooth;
-}
-
-.main2 p {
-    color: orange;
-}
-
-header {
-    background-color: transparent;
-    display: flex;
-    justify-content: flex-end;
-    padding: 1.5rem;
-}
-
-.search {
-    background-color: transparent;
-    border: 2px solid #121280;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-    width: 250px;
-}
-
-#main {
-    align-self: center;
-    margin-left: 45px;
-}
-
-.search::placeholder {
-    color: #7378c5;
-}
-
-#search:hover {
-    outline: none;
-    background-color: #22254b;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 100px;
-    padding-top: -20px;
-}
-
-header h1 {
-    color: #ff8623;
-    text-align: center;
-}
-
-#privacy-header {
-    color: #ff8623;
-    text-align: center;
-}
-
-.highlight {
-    color: orange;
-}
-
-.highlight:hover {
-    color: #ff8623;
-}
-
-.highlight2 {
-    color: orange;
-}
-
-.highlight2:hover {
-    color: #ff8623;
-}
-
-.search:focus {
-    outline: none;
-    background-color: #22254b;
-}
-
-.about {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 130px;
-    border-radius: 8px;
-    z-index: 999;
-}
-
-.header2 {
-    text-align: center;
-    align-self: center;
-    margin-left: 500px;
-}
-
-.back-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 41px;
-    border-radius: 8px;
-    z-index: 999;
-}
-
-.movie-card {
-    display: flex;
-    background: #fff;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.movie-image {
-    width: 150px;
-    height: 225px;
-    background-size: cover;
-    background-position: center;
-}
-
-.tvSeries-info {
-    padding: 20px;
-    flex-grow: 1;
-}
-
-.green {
-    color: #4CAF50;
-}
-
-.orange {
-    color: #FF9800;
-}
-
-.red {
-    color: #ff0000;
-}
-
-#profileBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    width: 100px;
-    top: 0;
-    margin-left: 316px;
-    border-radius: 8px;
-}
-
-#profileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#mobileGoogleSignInBtn {
-    display: none;
-}
-
-#mobileProfileBtn {
-    display: none;
-}
-
-@media screen and (max-width: 900px) {
-    #mobileGoogleSignInBtn {
-        display: block;
-    }
-
-    #mobileProfileBtn {
-        display: block;
-    }
-}
-
-.back-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.movie {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-    height: 555px;
-}
-
-.tvSeries {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-    height: 555px;
-}
-
-.movie img, .tvSeries img {
-    height: 435px;
-    width: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-.movie .overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-    text-align: center;
-}
-
-.tvSeries .overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.tvSeries-info h3 {
-    margin: 0;
-}
-
-.tvSeries:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.tvSeries-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.tvSeries-info span.green {
-    color: rgb(39,189,39);
-}
-
-.movie-info span.green {
-    color: rgb(39,189,39);
-}
-
-.tvSeries-info span.orange {
-    color: orange;
-}
-
-.movie-info span.orange {
-    color: orange;
-}
-
-.tvSeries-info span.red {
-    color: rgb(189,42,42);
-}
-
-.movie-info span.red {
-    color: rgb(189,42,42);
-}
-
-.overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.movie:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.overview h4 {
-    margin-top: 0;
-}
-
-.genres {
-    align-self: center;
-    margin-left: 15px;
-    color: #ff8623;
-}
-
-#other1:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.circle-text {
-    font-size: 25px;
-    font-weight: bold;
-    dominant-baseline: middle;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.about:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-#my-heading1 {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-@keyframes fadeInUp {
-    0% {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-#my-heading {
-    margin-bottom: -25px;
-    opacity: 0;
-    animation: fadeInUp 1s ease forwards;
-}
-
-#my-heading a {
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.highlight {
-    display: inline-block;
-    opacity: 0;
-    animation: fadeInUp 1s ease forwards 0.5s;
-}
-
-#trivia-btn {
-    position: fixed;
-    bottom: 60px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#trivia-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.button2:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#discussions-btn {
-    position: fixed;
-    bottom: 100px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#discussions-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-of-the-day-btn {
-    position: fixed;
-    bottom: 140px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#loadMoreButton {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    color: white;
-    margin-top: 20px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#loadMoreButton:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-of-the-day-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-of-the-day-btn2 {
-    position: fixed;
-    bottom: 80px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-of-the-day-btn2:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#button-search {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#button-search:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.details-container {
-    display: flex;
-    height: calc(100% - 60px);
-    color: white;
-    overflow-y: auto;
-    align-items: start;
-}
-
-.movie-left, .movie-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.actor-left, .actor-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    margin: 20px;
-}
-
-.director-left, .director-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    margin: 20px;
-}
-
-#actor-name {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    margin-top: -10px;
-}
-
-.movie-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.movie-left img {
-    height: auto;
-}
-
-.actor-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.director-left {
-    width: 33.3333%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
-}
-
-.movie-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-bottom: 50px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    height: 100%;
-}
-
-.actor-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-top: 70px;
-}
-
-.director-right {
-    width: 66.6666%;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-top: 40px;
-}
-
-.movie-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-    margin-right: 5px;
-}
-
-.movie-link:hover {
-    color: #ff8623;
-}
-
-.movie-image {
-    width: 100%;
-    height: auto;
-    border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-}
-
-@media (max-width: 768px) {
-    .movie-image {
-        height: auto;
-    }
-    #actor-image {
-        height: auto;
-    }
-}
-
-.movie-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.actor-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#rating {
-    color: inherit;
-}
-
-#rating:hover {
-    color: #ff8623;
-}
-
-#metacritics {
-    color: inherit;
-}
-
-#metacritics:hover {
-    color: #ff8623;
-}
-
-.director-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.adult-indicator {
-    color: red;
-    font-weight: bold;
-}
-
-.general-indicator {
-    color: green;
-    font-weight: bold;
-}
-
-.movie-description {
-    font-size: 1rem;
-    color: white;
-    width: 100%;
-}
-
-.companies-section {
-    margin-top: 20px;
-}
-
-.companies-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    overflow: hidden !important;
-}
-
-.company-item {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    margin: 5px;
-    overflow: hidden;
-    border-radius: 8px;
-}
-
-@media (max-width: 768px) {
-    .company-item {
-        max-width: 125px;
-    }
-}
-
-.company-logo {
-    max-width: 100px;
-    max-height: 75px;
-    height: auto;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-.company-item:hover {
-    transform: scale(1.07);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-}
-
-.company-details {
-    width: 100%;
-}
-
-.company-name {
-    font-size: 12px;
-    margin: 0;
-    word-break: break-word;
-    white-space: normal;
-    text-align: center;
-}
-
-.actor-description {
-    font-size: 1rem;
-    color: white;
-    transform: translateY(10%);
-}
-
-.director-description {
-    font-size: 1rem;
-    color: white;
-    transform: translateY(10%);
-}
-
-.streaming-logo {
-    display: inline-flex;
-    align-items: flex-end;
-    vertical-align: bottom;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.streaming-logo img {
-    width: 50px;
-    margin-left: 10px;
-    transition: transform 0.3s ease;
-}
-
-.streaming-logo:hover {
-    transform: scale(1.1);
-    cursor: pointer;
-}
-
-.movie-rating {
-    margin-top: 100px;
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#user-ratings {
-    color: inherit;
-}
-
-#user-ratings:hover {
-    color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-#userRatings {
-    color: inherit;
-}
-
-#userRatings:hover {
-    color: #ff8623;
-}
-
-#githubLink {
-    color: white !important;
-}
-
-#githubLink1 {
-    color: black !important;
-}
-
-#githubLink1:hover {
-    color: #ff8623 !important;
-    transition: 0.1s ease-in;
-}
-
-#githubLink2 {
-    color: white !important;
-}
-
-#githubLink2: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;
-}
-
-.modal-overlay {
-    display: none;
-    position: fixed;
-    z-index: 100000000002;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0,0,0);
-    background-color: rgba(0,0,0,0.4);
-    justify-content: center;
-    align-items: center;
-}
-
-.modal-visible {
-    display: flex !important;
-}
-
-.pin-btn {
-    color: #ff8623;
-}
-
-.pin-btn:hover {
-    color: #c45c00;
-}
-
-.pin-btn.pinned {
-    color: #7378c5;
-}
-
-.spinner {
-    border: 4px solid #000;
-    border-radius: 50%;
-    border-top: 5px solid #ff8623;
-    width: 100px;
-    height: 100px;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-#githubLink:hover {
-    color: #ff8623 !important;
-    transition: 0.1s ease-in;
-}
-
-#imdbRating, #rtRating {
-    text-decoration: none;
-    color: inherit;
-    font-size: 2.5rem;
-    font-weight: bold;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-#imdbRating:hover {
-    color: #ff8623;
-}
-
-#rtRating:hover {
-    color: #ff8623;
-}
-
-#movie-rating h2:hover {
-    color: initial;
-}
-
-h2 {
-    font-size: 1.74rem;
-}
-
-h2:hover {
-    color: orange;
-    transition: 0.1s linear;
-}
-
-p {
-    color: white;
-}
-
-.similar-movies-container h3 {
-    color: #E0E0E0;
-}
-
-.similar-movies span:hover {
-    text-decoration: none;
-    opacity: 0.8;
-    color: #ff8623;
-}
-
-.movie-details-body {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: repeat;
-}
-
-.movie-details-body2 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-position: center;
-    height: 100vh;
-    background-size: auto;
-    background-repeat: repeat;
-}
-
-.movie-details-body3 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-}
-
-.movie-details-body4 {
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-}
-
-.favorites-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 219px;
-    border-radius: 8px;
-    padding-left: 10px;
-    padding-right: 10px;
-    box-sizing: border-box;
-    z-index: 999;
-    max-width: 95px;
-}
-
-#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;
-}
-
-#searchContainer {
-    position: relative;
-    display: inline-block;
-}
-
-#averageDisplays {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 20px;
-    width: 100%;
-}
-
-.progress-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 20px;
-    flex: 1;
-    text-align: center;
-}
-
-.progress-ring {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.progress-ring__circle {
-    fill: transparent;
-    stroke-width: 10;
-    stroke: #fff;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-}
-
-.progress-ring__progress {
-    fill: transparent;
-    stroke-width: 10;
-    stroke: var(--progress-color);
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-    transition: stroke-dashoffset 0.6s ease-out;
-}
-
-.progress-ring__text {
-    font-size: 20px;
-    dominant-baseline: middle;
-    text-anchor: middle;
-    opacity: 0;
-    transition: opacity 0.6s ease-out;
-}
-
-strong {
-    font-weight: bold;
-}
-
-.favorites-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#favorite-btn {
-    background-color: rgba(255, 255, 255, 0.05);
-    color: grey;
-    margin-left: 10px;
-    border-radius: 8px;
-    width: 40px;
-    box-shadow: none;
-    position: relative;
-    cursor: pointer;
-}
-
-#favorite-btn:hover {
-    background-color: #dcdcdc;
-}
-
-.tooltip-text {
-    visibility: hidden;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    bottom: 125%;
-    left: 10%;
-    margin-left: -90px;
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.tooltip-text::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #555 transparent transparent transparent;
-}
-
-.title-favorites-container {
-    display: flex;
-    align-items: center;
-    overflow: visible;
-}
-
-#favorite-btn.favorited {
-    color: red;
-}
-
-#favorites-main {
-    margin-left: 15px;
-}
-
-#favorite-btn:hover::after {
-    content: "Favorite / Unfavorite";
-    position: absolute;
-    top: -45px;
-    left: 50%;
-    width: 55px;
-    transform: translateX(-70%);
-    background-color: #232323;
-    color: white;
-    padding: 5px;
-    border-radius: 5px;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 10;
-}
-
-#main2 {
-    text-align: center;
-    max-width: 800px;
-    margin: auto;
-    padding: 20px;
-    margin-bottom: 300px;
-}
-
-#main2 h2, #main2 h3 {
-    color: #ff8623;
-    margin-bottom: 20px;
-}
-
-#aboutHeader {
-    margin-top: -25px;
-}
-
-#main2 p, #main2 ul, #main2 li {
-    text-align: left;
-    margin: auto;
-    max-width: 800px;
-    color: #ff8623;
-}
-
-#main2 ul {
-    list-style: none;
-    padding: 0;
-}
-
-#main2 li {
-    background-color: #f0f0f0;
-    border: 1px solid #ddd;
-    margin-top: 10px;
-    padding: 10px;
-    border-radius: 5px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: black;
-    align-items: center;
-}
-
-#main2 li:hover {
-    background-color: #e6e6e6;
-}
-
-#main2 a {
-    color: #7378c5;
-    text-decoration: none;
-}
-
-#main2 a:hover {
-    text-decoration: underline;
-}
-
-.app-link {
-    margin-top: 20px;
-    text-align: center;
-}
-
-.app-link button {
-    background-color: #f0f0f0;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 10px 15px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: black;
-    cursor: pointer;
-    font-size: 16px;
-    display: block;
-    width: auto;
-    margin: 10px auto;
-}
-
-.app-btn {
-    background-color: #7378c5;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 10px 15px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    color: white;
-    cursor: pointer;
-    font: inherit;
-    display: block;
-    width: auto;
-    margin: 10px auto;
-    transition: 0.1s ease-in;
-}
-
-.clock {
-    text-align: center;
-    font-size: 20px;
-    color: #ff8623;
-}
-
-.clock:hover {
-    color: #ff8623;
-}
-
-#time-label {
-    color: #ff8623;
-}
-
-#time-label:hover {
-    color: #ff8623;
-}
-
-.app-btn:hover {
-    background-color: #ff8623;
-}
-
-.app-link button:hover {
-    background-color: #e6e6e6;
-}
-
-.app-link p {
-    margin-top: 10px;
-    color: white;
-}
-
-.side-nav {
-    position: fixed;
-    left: -250px;
-    top: 0;
-    width: 250px;
-    height: 100%;
-    background-color: #373b69;
-    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
-    overflow-y: auto;
-    transition: left 0.39s;
-    z-index: 1000;
-}
-
-.side-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.side-nav ul li {
-    padding: 15px 20px;
-    border-radius: 8px;
-}
-
-.side-nav ul li a {
-    color: white;
-    text-decoration: none;
-    display: block;
-    padding-left: 5px;
-}
-
-.side-nav ul li a:hover {
-    background-color: #ff8623;
-    border-radius: 8px;
-}
-
-.nav-toggle {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    cursor: pointer;
-    font-size: 1.5rem;
-    top: 5px;
-    left: 15px;
-    border-radius: 8px;
-    padding: 3.5px;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    display: flex;
-    position: fixed;
-    justify-content: center;
-    align-items: center;
-    padding-left: 4.25px;
-}
-
-.nav-toggle i {
-    line-height: inherit;
-}
-
-.nav-toggle:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#button-container {
-    text-align: center;
-}
-
-#button-remove {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#button-remove:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#trailerButton {
-    color: #fff;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#trailerButton:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.trailer-button {
-    display: block;
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-    width: fit-content;
-    font-size: 1rem;
-}
-
-.trailer-button:hover {
-    background-color: #ff8623;
-}
-
-.cast-container {
-    margin-top: 20px;
-}
-
-.actor {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor:hover {
-    color: #0056b3;
-}
-
-.actor-item {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor-item:hover {
-    color: #0056b3;
-}
-
-.cast-container {
-    margin-top: 20px;
-}
-
-.actor-link {
-    cursor: pointer;
-    color: #007bff;
-    text-decoration: underline;
-}
-
-.actor-link:hover {
-    color: #0056b3;
-}
-
-.cast-list {
-    white-space: nowrap;
-    overflow-x: auto;
-    margin-top: 10px;
-}
-
-.actor-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.watchlist-buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 60px;
-    margin-left: 30px;
-}
-
-.watchlist-buttons-container button {
-    margin: 0 10px;
-    background-color: #7378c5;
-    font: inherit;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.1s ease-in;
-}
-
-#button {
-    margin: 0 10px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: 0.1s ease-in;
-}
-
-#button:hover {
-    background-color: #ff8623;
-}
-
-.watchlist-buttons-container button:hover {
-    background-color: #ff8623;
-}
-
-#search-container {
-    display: none;
-    background-color: rgba(255, 255, 255, 0.1);
-    padding: 15px;
-    border-radius: 8px;
-    color: white;
-    margin: 10px;
-}
-
-#movie-match-container1 {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0;
-    padding: 0;
-    top: 0;
-    margin: 0;
-}
-
-.checkbox-container {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.checkbox-container label {
-    margin-top: 6px;
-}
-
-.active-category {
-    background-color: #ff8623;
-    color: white;
-}
-
-.nav-button {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.nav-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#menu-btn {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-    font-size: 14px;
-    z-index: 1000000002 !important;
-}
-
-#menu-btn i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-#menu-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#settings-container {
-    background-color: rgba(255, 255, 255, 0.1);
-    padding: 15px;
-    border-radius: 32px;
-    color: white;
-    margin: 5px auto;
-    max-width: 500px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-@media (max-width: 700px) {
-    #settings-container {
-        max-width: calc(100% - 10px);
-        margin: 10px 10px;
-    }
-}
-
-#chat-button,
-#settings-btn,
-#movie-of-the-day-btn,
-#movie-match-btn,
-#movie-match-btn3,
-#movie-timeline-btn,
-#discussions-btn,
-#trivia-btn,
-#back-to-top-btn {
-    transition: transform 0.5s ease, opacity 0.5s ease;
-    transform: translateY(20px);
-    opacity: 0;
-    display: none;
-}
-
-@media (min-width: 768px) {
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #movie-match-btn3,
-    #trivia-btn,
-    #back-to-top-btn {
-        position: fixed;
-        right: 10px;
-        z-index: 1000;
-    }
-
-    #menu-btn {
-        display: block;
-    }
-}
-
-.mobile-bottom-bar {
-    display: none;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    background-color: #7378c5;
-    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
-    justify-content: space-around;
-    align-items: center;
-    z-index: 100000222;
-    transition: transform 0.09s ease-in-out;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-}
-
-.hide-bar {
-    transform: translateY(100%);
-}
-
-.mobile-bottom-bar a {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    text-align: center;
-    color: white;
-    text-decoration: none;
-    padding: 6px 0;
-    width: 15%;
-}
-
-.mobile-bottom-bar a:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.mobile-bottom-bar i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-.mobile-bottom-bar span {
-    display: block;
-    font-size: 10px;
-    color: #ecf0f1;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #trivia-btn,
-    #menu-btn,
-    #back-to-top-btn {
-        display: none;
-    }
-}
-
-.nav-button:disabled {
-    background-color: #b5b5b5;
-    cursor: not-allowed;
-}
-
-.search-users-container {
-    text-align: center;
-    margin: 20px auto;
-    background-color: rgba(55, 59, 105, 0.8);
-    padding: 15px;
-    border-radius: 8px;
-    max-width: 500px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    color: white;
-    font: inherit;
-}
-
-.search-users-container input[type="text"] {
-    width: 70%;
-    padding: 10px;
-    margin-right: 10px;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-    font: inherit;
-}
-
-.search-users-container button {
-    padding: 10px 20px;
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    color: white;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    font: inherit;
-}
-
-.search-users-container button:hover {
-    background-color: #ff8623;
-}
-
-.search-results-container {
-    display: none;
-    background-color: rgba(211, 211, 211, 0.5);
-    max-width: 500px;
-    margin: 10px auto;
-    padding: 10px;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    text-align: left;
-}
-
-#viewMyProfileBtn {
-    display: block;
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 20px;
-    margin: 20px auto;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    font: inherit;
-}
-
-#viewMyProfileBtn:hover {
-    background-color: #ff8623;
-}
-
-.user-search-result {
-    background-color: rgba(55, 59, 105, 0.8);
-    margin: 10px auto;
-    padding: 10px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    color: white;
-    transition: background-color 0.3s ease;
-    height: 100px;
-    max-width: 400px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-}
-
-.user-search-result:hover {
-    background-color: #ff8623;
-}
-
-.user-search-result img {
-    width: auto;
-    height: 95%;
-    max-height: 100px;
-    margin-right: 10px;
-    border-radius: 8px;
-    object-fit: contain;
-}
-
-#userLink {
-    color: black;
-}
-
-#userLink:hover {
-    color: #ff710d;
-}
-
-#chat-button {
-    background-color: #7378c5;
-    bottom: 325px;
-    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);
-}
-
-#chat-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-.user-search-result div {
-    width: 67%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: left;
-}
-
-.user-search-result strong {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.user-search-result p {
-    margin: 0;
-    font-size: 0.9rem;
-}
-
-.pagination {
-    border-radius: 8px;
-    background-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-}
-
-@media (max-width: 767px) {
-    .genres + main + .pagination {
-        text-align: center;
-    }
-
-    .pagination {
-        position: relative;
-        width: calc(100% - 20px);
-        margin-top: 20px;
-    }
-}
-
-.page-button {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    margin: 2px;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    font: inherit;
-    font-size: 12.9px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-.page-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.page-button.active {
-    background-color: #4a4e8c;
-}
-
-.page-button:disabled {
-    background-color: #b5b5b5;
-    cursor: default;
-}
-
-#search-results-label {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-#search-results-label:hover {
-    color: #ff8623;
-}
-
-.category-buttons button {
-    background-color: #7378c5;
-    font: inherit;
-    color: white;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    margin: 10px;
-    transition: 0.1s ease-in;
-}
-
-.category-buttons button:hover {
-    background-color: #534caf;
-}
-
-.watchlist {
-    background-color: rgba(255, 255, 255, 0.1);
-    margin: 10px;
-    padding: 15px;
-    border-radius: 8px;
-    color: white;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-}
-
-.watchlist-title {
-    font-size: 1.5rem;
-    color: #ff8623;
-    text-align: center;
-}
-
-.watchlist-description {
-    font-size: 1rem;
-    margin-bottom: 10px;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.modal-content {
-    background-color: #373b69;
-    margin: 15% auto;
-    padding: 20px;
-    border-radius: 8px;
-    width: 50%;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-}
-
-.modal-content h2 {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.modal-content label {
-    color: #fff;
-    margin-bottom: 10px;
-    display: block;
-}
-
-.modal-content input[type="text"],
-.modal-content textarea {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 5px;
-    border: 1px solid #7378c5;
-    background-color: #22254b;
-    color: #fff;
-}
-
-.modal-content button {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font: inherit;
-    display: block;
-    margin: 10px auto;
-    transition: background-color 0.3s ease;
-}
-
-.modal-content select {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 5px;
-    border: 1px solid #7378c5;
-    background-color: #22254b;
-    color: #fff;
-}
-
-.modal-content button:hover {
-    background-color: #ff8623;
-}
-
-.modal-content {
-    position: relative;
-    background-color: #373b69;
-    margin: 15% auto;
-    padding: 20px;
-    border-radius: 8px;
-    width: 50%;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-}
-
-.modal-content h2 {
-    color: #ff8623;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.modal-content .close-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    color: #fff;
-    cursor: pointer;
-}
-
-.modal-content label {
-    color: #fff;
-    margin-bottom: 10px;
-    display: block;
-}
-
-#subheading:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#aboutHeader:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#profileLink {
-    color: white !important;
-    text-decoration: underline !important;
-}
-
-#profileLink:hover {
-    color: #ff8623 !important;
-    transition: 0.1s linear;
-}
-
-textarea {
-    resize: none;
-}
-
-.close-button {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close-button:hover {
-    color: #ff8623;
-}
-
-.close-button:hover,
-.close-button:focus {
-    color: #ff8623;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.actor-link:hover {
-    color: #ff8623;
-}
-
-.genres {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-#discussion-input {
-    background-color: transparent;
-    border: 2px solid #ff8623;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-}
-
-#discussion-input:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#post-btn {
-    background-color: #ff8623;
-    font: inherit;
-}
-
-#post-btn:hover {
-    background-color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-ol li:hover {
-    color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-#chatbotContainer {
-    width: 95%;
-    max-width: 600px;
-    background-color: rgba(0, 0, 0, 0.7);
-    margin: 20px auto;
-    border-radius: 8px;
-    padding: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-#chatbotHeader {
-    background-color: #ff8623;
-    color: white;
-    padding: 10px;
-    text-align: center;
-    border-radius: 8px;
-    margin-top: 10px;
-}
-
-#chatbotBody {
-    overflow-y: auto;
-    max-height: 300px;
-    padding: 10px;
-    border-radius: 8px;
-    color: white;
-    word-wrap: break-word;
-    box-sizing: border-box;
-    margin-top: 10px;
-    border: 1px solid #ff8623;
-}
-
-#sendButton {
-    padding: 10px;
-    margin-top: 10px;
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: 1rem;
-    color: white;
-    background-color: #ff8623;
-    border: none;
-    cursor: pointer;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-#sendButton:hover {
-    background-color: #7f4caf;
-    transition: 0.1s linear;
-}
-
-#chatbotInput {
-    width: 100%;
-    padding: 10px 20px;
-    border: 1px solid #ff8623;
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: 1rem;
-    background-color: transparent;
-    color: white;
-    margin-top: 10px;
-    box-sizing: border-box;
-}
-
-.highlight1 {
-    color: orange;
-}
-
-#chatbotInput:focus {
-    outline: none;
-}
-
-#bot-header {
-    text-align: center;
-    width: 100%;
-}
-
-#chatbotBody > div {
-    margin-bottom: 10px;
-    padding: 5px 10px;
-    border-radius: 5px;
-}
-
-@media (max-width: 705px) {
-    #search-title,
-    #alt-title {
-        display: none;
-    }
-}
-
-@media (max-height: 930px) {
-    #search-title,
-    #alt-title {
-        display: none;
-    }
-}
-
-#chatbotBody > div[text-align="right"] {
-    background-color: #ff8623;
-    align-self: flex-end;
-}
-
-#chatbotBody > div[text-align="left"] {
-    background-color: #7378c5;
-    align-self: flex-start;
-}
-
-@media (max-width: 767px) {
-    #chatbotContainer {
-        top: 56.1%
-    }
-}
-
-#change-director-btn {
-    padding: 5px 10px;
-    cursor: pointer;
-    border: none;
-    background-color: #7378c5;
-    font: inherit;
-    color: #000000;
-    border-radius: 8px;
-}
-
-#movie-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#movie-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#actor-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#actor-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#director-image {
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#director-image:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#company-logo {
-    z-index: 100000000;
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
-    cursor: pointer;
-}
-
-#rating-link {
-    color: white;
-}
-
-#rating-link:hover {
-    color: #ff8623;
-}
-
-#company-logo:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-#change-director-btn:hover {
-    background-color: #ff8623;
-}
-
-#trailerContainer {
-    width: 560px;
-    height: 315px;
-    overflow: hidden;
-    transition: max-height 0.5s ease;
-}
-
-#removeBtn {
-    color: white;
-}
-
-#removeBtn:hover {
-    color: #ff8623;
-}
-
-.director-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.director-link:hover {
-    color: #ff8623;
-}
-
-@media (max-width: 982px) {
-    #local-time {
-        display: none;
-    }
-}
-
-#custom-bg-upload {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    border: 2px solid #7378c5;
-    background-color: #22254b;
-    color: white;
-    font-size: 16px;
-    margin-bottom: 10px;
-    cursor: pointer;
-}
-
-#movie-details-container {
-    margin-top: 10px;
-}
-
-#custom-bg-name {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    border: 2px solid #7378c5;
-    background-color: #22254b;
-    color: white;
-    font-size: 16px;
-    margin-bottom: 10px;
-}
-
-#upload-bg-btn {
-    background-color: #ff8623;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    font-size: 1rem;
-    border-radius: 8px;
-    cursor: pointer;
-    margin: 20px auto;
-    display: block;
-}
-
-.chart-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    padding: 20px;
-    justify-content: center;
-}
-
-.chart-box {
-    background-color: rgba(255, 255, 255, 0.5);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    padding: 20px;
-    width: 100%;
-    max-width: 600px;
-    height: 400px;
-    margin: 20px auto;
-    opacity: 1;
-}
-
-canvas {
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-}
-
-@media screen and (max-width: 900px) {
-    .chart-container {
-        flex-direction: column;
-    }
-
-    .chart-box {
-        height: auto;
-    }
-}
-
-#ratingImdb {
-    color: #ff710d;
-    font-size: 17px;
-}
-
-#ratingImdb:hover {
-    color: #ff8623;
-}
-
-.chart-title {
-    text-align: center;
-    color: #ff710d;
-    margin-bottom: 15px;
-}
-
-#descriptionP {
-    margin-top: -10px;
-}
-
-#upload-bg-btn:hover {
-    background-color: #7378c5;
-    transition: background-color 0.3s ease;
-}
-
-#settings-btn {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#settings-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-@media (max-width: 1000px) {
-    #comments-section {
-        margin-bottom: 210px;
-    }
-}
-
-#local-time {
-    transform: translateX(10%);
-    padding: 10px;
-    border-radius: 10px;
-    z-index: 10;
-}
-
-#mobileProfileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-@media (max-width: 800px) {
-    #my-heading {
-        margin-left: 0;
-    }
-
-    #movie-details-body3 {
-        background-image: url("https://movie-verse.com/images/universe-1.webp");
-        background-position: center;
-        height: 100vh;
-        background-size: auto;
-        background-repeat: repeat;
-        width: 100vw;
-    }
-
-    #profileBtn {
-        display: none;
-    }
-
-    #indexLink {
-        margin-bottom: -15px;
-    }
-
-    .back-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: -180px;
-        border-radius: 8px;
-    }
-
-    .about {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 0;
-        border-radius: 8px;
-    }
-
-    .favorites-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        width: 95px;
-        margin-left: 188px;
-        border-radius: 8px;
-        padding-left: 10px;
-        padding-right: 10px;
-        box-sizing: border-box;
-    }
-
-    #googleSignInBtn {
-        display: none;
-    }
-
-    .movie-details-body {
-        min-height: 100% !important;
-    }
-
-    .movie-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .actor-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .director-left img {
-        width: 90% !important;
-        height: auto !important;
-        overflow: hidden;
-    }
-
-    .details-container {
-        flex-direction: column;
-    }
-
-    #movie-details-container {
-        margin-top: 15px;
-    }
-
-    .movie-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .actor-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .director-left {
-        margin-top: -60px;
-        padding-top: 20px;
-        height: auto;
-        overflow: visible;
-    }
-
-    .movie-left, .movie-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .actor-left, .actor-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .director-left, .director-right {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-        height: auto;
-    }
-
-    .movie-right {
-        margin-top: 0;
-        height: 100% !important;
-        overflow: visible;
-        margin-bottom: 5px;
-    }
-
-    #descriptionP {
-        margin-top: -100px;
-    }
-
-    .actor-right {
-        margin-top: -20px;
-        height: 100% !important;
-        overflow: visible;
-    }
-
-    .director-right {
-        margin-top: -20px;
-        height: 100% !important;
-        overflow: visible;
-    }
-
-    header {
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    main {
-        margin-bottom: -40px;
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    #clear-search-btn {
-        margin-top: 5px;
-    }
-
-    .watchlist-buttons-container {
-        margin-left: -3px;
-    }
-
-}
-
-.year-input-container {
-    margin: 20px;
-}
-
-.year-input {
-    width: 150px;
-    padding: 10px;
-    margin: 5px;
-    border-radius: 5px;
-    border: 1px solid #ddd;
-}
-
-#load-movies {
-    padding: 10px 10px;
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#load-movies:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.movie-card {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-}
-
-#form {
-    margin-top: 20px;
-}
-
-#form1 {
-    margin-top: 5px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.movie-card img {
-    width: 100%;
-}
-
-.movie-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-    padding-top: 14px;
-    flex-grow: 1;
-}
-
-.tvSeries-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-}
-
-.movie-info h3 {
-    margin: 0;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.timeline-container {
-    margin: 20px auto;
-    background-color: rgba(255,255,255,0.1);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    padding: 20px;
-    width: calc(100% - 24px);
-    border-radius: 16px;
-    margin-top: 50px;
-    text-align: center;
-}
-
-#movie-timeline-btn {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    cursor: pointer;
-}
-
-#movie-timeline-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movies-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-    flex-direction: column;
-}
-
-#tvseries-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-    flex-direction: column;
-}
-
-#tvseries-container .movie-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-#movies-container1 {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-#movies-container .movie-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.movies-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 20px;
-}
-
-.center-container {
-    text-align: center;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-}
-
-.center-container1 {
-    text-align: center;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-}
-
-#load-movies {
-    cursor: pointer;
-    font: inherit;
-}
-
-#select-text {
-    margin-top: 30px;
-    color: #ff8623;
-}
-
-#select-text:hover {
-    color: #ff8623;
-}
-
-#clear-search-btn {
-    background-color: #7378c5;
-    color: black;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-left: 10px;
-    font: inherit;
-    margin-right: 20px;
-}
-
-#clear-search-btn:hover {
-    background-color: #ff8623;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-    body {
-        background-size: auto;
-        background-repeat: repeat;
-    }
-}
-
-#search-title {
-    color: #ff8623;
-    text-align: center;
-    font-size: 1.74rem;
-    margin-bottom: 20px;
-}
-
-#search-title:hover {
-    color: #ff8623;
-}
-
-#search-title1 {
-    color: #ff8623;
-    text-align: center;
-    font-size: 1.74rem;
-    margin-bottom: 20px;
-}
-
-#search-title1:hover {
-    color: #ff8623;
-}
-
-#movie-match-main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-    margin-top: 60px;
-    padding: 20px;
-    width: 100%;
-    margin-bottom: 300px;
-}
-
-.profile-container {
-    text-align: center;
-    margin-top: 20px;
-}
-
-.profile-image-container img {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.profile-info p {
-    margin: 10px 0;
-}
-
-body {
-    overflow-x: hidden;
-    max-width: 100%;
-}
-
-#googleSignInBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 420px;
-    border-radius: 8px;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-.mobile-sign-in-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 12px;
-    margin-bottom: 10px;
-}
-
-#mobileGoogleSignInBtn {
-    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;
-}
-
-#mobileProfileBtn {
-    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;
-}
-
-#mobileGoogleSignInBtn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-.movie-match-container {
-    max-width: 500px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 15px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-#movie-match-form {
-    background-color: transparent;
-    border: 2px solid #7378c5;
-    border-radius: 50px;
-    padding: 20px;
-    max-width: 500px;
-    margin: auto;
-}
-
-#movie-match-form label, #movie-match-form select, #movie-match-form input[type="submit"] {
-    display: block;
-    width: 100%;
-    margin-bottom: 10px;
-    font-family: "Poppins", sans-serif;
-    color: #fff;
-}
-
-#movie-match-form label {
-    margin-bottom: 5px;
-    font-size: 1rem;
-}
-
-#movie-match-form select {
-    background-color: #7378c5;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-#movie-match-form input[type="submit"] {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 25px;
-    border: none;
-    cursor: pointer;
-    color: white;
-    padding: 10px 15px;
-    margin-top: 30px;
-}
-
-#movie-match-form input[type="submit"]:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#movie-match-btn2 {
-    position: fixed;
-    bottom: 115px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn2:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-match-btn3 {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-match-btn3:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-match-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.company-left, .company-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    text-align: center;
-}
-
-.company-left {
-    width: 33.33%;
-}
-
-.company-right {
-    width: 66.67%;
-}
-
-#company-movies-list {
-    text-align: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding: 10px;
-}
-
-#company-movies-list span {
-    margin: 0;
-}
-
-.company-link {
-    cursor: pointer;
-    color: white;
-    text-decoration: underline;
-}
-
-.company-link:hover {
-    color: #ff8623;
-}
-
-.title-logo-container {
-    text-align: center;
-    align-items: center;
-    margin-bottom: 20px;
-}
-
-.company-header {
-    text-align: center;
-    align-self: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #ffeb3b;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.company-description {
-    margin-top: 20px;
-}
-
-.company-description, #company-headquarters, #company-country, #company-website {
-    color: white;
-    margin-bottom: 10px;
-}
-
-#company-website:hover {
-    color: #ff8623;
-}
-
-.movies-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-
-.movies-list a {
-    color: white;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.movies-list a:hover {
-    color: purple;
-}
-
-@media (max-width: 800px) {
-    .company-details-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .company-left {
-        width: 100%;
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .company-right {
-        width: 100%;
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .company-left img {
-        max-width: 100%;
-        height: auto;
-    }
-}
-
-#button-clear {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 15px;
-    font: inherit;
-    cursor: pointer;
-    margin-left: 10px;
-    color: #000000;
-    margin-right: 40px;
-}
-
-#rating-value:hover {
-    color: #ff8623;
-}
-
-#button-clear:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.rating {
-    display: flex;
-    justify-content: flex-end;
-    direction: rtl;
-    color: grey;
-    font-size: 20px;
-}
-
-.rating .star {
-    color: white;
-    cursor: pointer;
-    transition: color 200ms;
-}
-
-.rating .star:hover,
-.rating .star:hover ~ .star {
-    color: gold;
-}
-
-@keyframes shake {
-    0% { transform: translateX(0); }
-    20% { transform: translateX(-5px); }
-    40% { transform: translateX(5px); }
-    60% { transform: translateX(-5px); }
-    80% { transform: translateX(5px); }
-    100% { transform: translateX(0); }
-}
-
-.shake-animation {
-    animation: shake 0.5s ease-in-out 5;
-}
-
-.search-results {
-    display: flex;
-    flex-direction: column;
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-#form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.search-container {
-    display: flex;
-    align-items: center;
-}
-
-#search-results {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-.search-result-card {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #7378c5;
-    margin-bottom: 2px;
-    margin-top: 5px;
-    width: 300px;
-    color: #212121;
-}
-
-.search-result-card:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.buttons-container button {
-    padding-left: 20px;
-}
-
-#clear-search {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    padding: 5px 10px;
-    margin-top: 10px;
-    margin-left: 20px;
-}
-
-#clear-search:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#view-all-results {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 5px 10px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    margin-top: 10px;
-}
-
-#view-all-results:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.result-image {
-    width: 64px;
-    height: 96px;
-    object-fit: cover;
-    border-radius: 4px;
-}
-
-.result-details {
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-}
-
-.result-name {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.result-type {
-    font-size: 14px;
-    font-style: italic;
-    color: #212121;
-}
-
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-    color: white;
-    transition: 0.3s ease-in;
-}
-
-#footer:hover {
-    cursor: pointer;
-}
-
-.notification-btn {
-    position: fixed;
-    top: 5px;
-    right: 20px;
-    z-index: 100;
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    cursor: pointer;
-    padding: 9px;
-    border-radius: 8px;
-    transition: 0.1s ease-in;
-}
-
-#closeModalButton {
-    background-color: #7378c5;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 16px;
-    text-align: center;
-    transition: 0.1s ease-in;
-}
-
-#closeModalButton:hover {
-    background-color: #ff8623;
-}
-
-#closeModalButton {
-    margin: 10px auto;
-    display: block;
-}
-
-.notification-btn:hover {
-    background-color: #ff8623;
-}
-
-.notification-modal {
-    position: fixed;
-    top: 50px;
-    right: 20px;
-    background-color: #7378c5;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    padding: 20px;
-    width: 300px;
-    z-index: 1002;
-    color: white;
-}
-
-@media (max-width: 900px) {
-    .notification-modal {
-        right: 12.5px;
-    }
-
-    .notification-btn {
-        right: 12.5px;
-    }
-}
-
-.notification-link:hover {
-    color: #ff8623 !important;
-}
-
-.notification-modal h4 {
-    margin: 0;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
-}
-
-.notification-modal ul {
-    list-style: none;
-    padding: 0;
-    margin-top: 10px;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.notification-modal ul li {
-    padding: 10px 0;
-    border-bottom: 1px solid #eee;
-}
-
-#comments-section {
-    background-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    border-radius: 10px;
-    padding: 20px;
-    margin: 20px 0;
-    max-width: calc(100% - 20px);
-}
-
-@keyframes dropIn {
-    0% {
-        opacity: 0;
-        transform: translateY(-50px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-#my-heading {
-    margin-bottom: -25px;
-    opacity: 0;
-    animation: dropIn 1s ease forwards;
-}
-
-#my-heading a {
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.highlight {
-    display: inline-block;
-    opacity: 0;
-    animation: dropIn 1s ease forwards 1s;
-}
-
-#local-time {
-    cursor: pointer;
-    opacity: 0;
-    animation: dropIn 1s ease forwards 1.5s;
-}
-
-#local-time p,
-#local-time div {
-    opacity: 0;
-    animation: dropIn 1s ease forwards 2s;
-}
diff --git a/MovieVerse-Mobile/www/css/trivia.css b/MovieVerse-Mobile/www/css/trivia.css
deleted file mode 100644
index 6a40c7c3..00000000
--- a/MovieVerse-Mobile/www/css/trivia.css
+++ /dev/null
@@ -1,1157 +0,0 @@
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-}
-
-#footerP {
-    color: white !important;
-}
-
-#footerP:hover {
-    transition: 0.1s ease-in;
-    color: #ff8623 !important;
-}
-
-@media (max-width: 900px) {
-    #local-time {
-        display: none;
-    }
-}
-
-body {
-    color: #ff903a;
-    font-family: "Poppins", sans-serif;
-    margin: 0;
-    align-content: center;
-    text-align: center;
-    background-image: url("https://movie-verse.com/images/universe-1.webp");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    overflow-x: hidden;
-}
-
-html {
-    scroll-behavior: smooth;
-    overflow-x: hidden;
-}
-
-#profileBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    width: 100px;
-    top: 0;
-    margin-left: 316px;
-    border-radius: 8px;
-}
-
-#profileBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-results {
-    display: flex;
-    flex-direction: column;
-    max-width: 600px;
-    margin: 0 auto;
-    align-items: center;
-}
-
-#form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.search-container {
-    display: flex;
-    align-items: center;
-}
-
-.search-result-card {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #7378c5;
-    margin: 0;
-    margin-bottom: 2px;
-    margin-top: 5px;
-    width: 300px;
-    color: #212121;
-}
-
-.search-result-card:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.search-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-.buttons-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.buttons-container button {
-    padding-left: 20px;
-}
-
-#clear-search {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    padding: 5px 10px;
-    margin-top: 10px;
-    margin-left: 20px;
-}
-
-#clear-search:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-#view-all-results {
-    background-color: #7378c5;
-    border: none;
-    border-radius: 8px;
-    padding: 5px 10px;
-    font: inherit;
-    cursor: pointer;
-    color: #000000;
-    margin-top: 10px;
-}
-
-#view-all-results:hover {
-    background-color: #ff8623;
-    transition: background-color 0.3s ease;
-}
-
-.result-image {
-    width: 64px;
-    height: 96px;
-    object-fit: cover;
-    border-radius: 4px;
-}
-
-.result-details {
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-}
-
-.result-name {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.result-type {
-    font-size: 14px;
-    font-style: italic;
-    color: #212121;
-}
-
-#googleSignInBtn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 420px;
-    border-radius: 8px;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-#googleSignInBtn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-}
-
-#submit {
-    background-color: #7378c5;
-    font: inherit;
-    margin-bottom: 39px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#submit:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-#regenerate-questions {
-    background-color: #7378c5;
-    font: inherit;
-    margin-bottom: 39px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#regenerate-questions:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#movie-timeline-btn {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-timeline-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#movie-of-the-day-btn {
-    position: fixed;
-    bottom: 140px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#movie-of-the-day-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#discussions-btn {
-    position: fixed;
-    bottom: 100px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#discussions-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-p {
-    text-align: center;
-    color: #ff8623;
-}
-
-.highlight:hover {
-    color: #ff8623;
-}
-
-.button2 {
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    right: 18px;
-    position: absolute;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-.main2 {
-    text-align: center;
-    color: orange;
-    scroll-behavior: smooth;
-}
-
-.main2 p {
-    color: orange;
-}
-
-header {
-    background-color: transparent;
-    display: flex;
-    justify-content: flex-end;
-    padding: 1.5rem;
-}
-
-.search {
-    background-color: transparent;
-    border: 2px solid #121280;
-    border-radius: 50px;
-    color: #fff;
-    font-family: inherit;
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-    width: 400px;
-}
-
-#main {
-    align-self: center;
-}
-
-.search::placeholder {
-    color: #7378c5;
-}
-
-#search:hover {
-    outline: none;
-    background-color: #22254b;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 100px;
-    padding-top: -20px;
-}
-
-header h1 {
-    color: #ff8623;
-    text-align: center;
-}
-
-.highlight {
-    color: orange;
-}
-
-.search:focus {
-    outline: none;
-    background-color: #22254b;
-}
-
-.about {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 130px;
-    border-radius: 8px;
-}
-
-.header2 {
-    text-align: center;
-    align-self: center;
-    margin-left: 500px;
-}
-
-.back-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    width: 85px;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 41px;
-    border-radius: 8px;
-}
-
-.back-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.movie {
-    background-color: #373b69;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-    margin: 1rem;
-    color: white;
-    position: relative;
-    overflow: hidden;
-    width: 300px;
-}
-
-.movie img {
-    width: 100%;
-}
-
-.movie-info {
-    color: #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem 1rem;
-    letter-spacing: 0.5px;
-}
-
-.movie-info h3 {
-    margin: 0;
-}
-
-.movie-info span {
-    background-color: #22254b;
-    border-radius: 3px;
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-}
-
-.movie-info span.green {
-    color: rgb(39,189,39);
-}
-
-.movie-info span.orange {
-    color: orange;
-}
-
-.movie-info span.red {
-    color: rgb(189,42,42);
-}
-
-.overview {
-    position: absolute;
-    padding: 2rem;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #fff;
-    color: black;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
-    overflow-y: auto;
-    visibility: hidden;
-}
-
-.movie:hover .overview {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-}
-
-.overview h4 {
-    margin-top: 0;
-}
-
-.genres {
-    align-self: center;
-    margin-left: 15px;
-    color: #ff8623;
-}
-
-#other1:hover {
-    color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#back-to-top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#movie-match-btn3 {
-    position: fixed;
-    bottom: 220px;
-    right: 20px;
-    background-color: #7378c5;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-}
-
-#movie-match-btn3:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#back-to-top-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.about:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-.modal-content {
-    background-color: #7378c5;
-    margin: 15% auto;
-    padding: 20px;
-    width: 80%;
-    max-width: 450px;
-    text-align: center;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    border-radius: 8px;
-}
-
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 10px;
-}
-
-.modal-content {
-    text-align: center;
-}
-
-.close-button {
-    cursor: pointer;
-    position: relative;
-    top: -2px;
-    font-size: 25px;
-    color: #aaa;
-    font-weight: bold;
-}
-
-.close-button:hover,
-.close-button:focus {
-    color: red;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.progress-circle {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    background: conic-gradient(green 0%, green var(--progress, 0%), red var(--progress, 0%), red 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin: 20px auto;
-    transition: stroke-dashoffset 0.5s ease-out;
-}
-
-.progress-circle::after {
-    content: '';
-    width: 130px;
-    height: 130px;
-    background: white;
-    border-radius: 50%;
-    display: block;
-}
-
-#correct-answers {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 30px;
-    font-weight: bold;
-}
-
-#result-text {
-    text-align: center;
-    font-size: 20px;
-}
-
-#my-heading {
-    color: #ff8623;
-    padding: 10px;
-    font-size: 36px;
-    text-align: center;
-    background-color: transparent;
-    margin-left: 40px;
-}
-
-.favorites-btn {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    height: 40px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font: inherit;
-    font-size: 16px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    margin-left: 219px;
-    border-radius: 8px;
-    padding-left: 10px;
-    padding-right: 10px;
-    box-sizing: border-box;
-}
-
-.favorites-btn:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#favorite-btn {
-    background: transparent;
-    color: grey;
-    margin-left: 10px;
-    border-radius: 8px;
-    width: 40px;
-    box-shadow: none;
-    position: relative;
-    cursor: pointer;
-}
-
-#favorite-btn:hover {
-    background-color: #dcdcdc;
-}
-
-#button-search {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-
-#button-search:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-#settings-btn {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#settings-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-#menu-btn {
-    background-color: #7378c5;
-    color: white;
-    padding: 10px;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    font: inherit;
-    font-size: 14px;
-}
-
-#menu-btn i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-#menu-btn:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-#chat-button {
-    background-color: #7378c5;
-    bottom: 260px;
-    right: 20px;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#chat-button:hover {
-    background-color: #ff8623;
-    transition: 0.1s ease-in;
-}
-
-
-#chat-button,
-#settings-btn,
-#movie-of-the-day-btn,
-#movie-match-btn,
-#movie-match-btn3,
-#movie-timeline-btn,
-#discussions-btn,
-#trivia-btn,
-#back-to-top-btn {
-    transition: transform 0.5s ease, opacity 0.5s ease;
-    transform: translateY(20px);
-    opacity: 0;
-    display: none;
-}
-
-@media (min-width: 768px) {
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #movie-match-btn3,
-    #trivia-btn,
-    #back-to-top-btn {
-        position: fixed;
-        right: 10px;
-        z-index: 1000;
-    }
-
-    #menu-btn {
-        display: block;
-    }
-}
-
-.mobile-bottom-bar {
-    display: none;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    background-color: #7378c5;
-    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
-    justify-content: space-around;
-    align-items: center;
-    z-index: 1000002;
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-}
-
-.mobile-bottom-bar {
-    transition: transform 0.09s ease-in-out;
-}
-
-.hide-bar {
-    transform: translateY(100%);
-}
-
-.mobile-bottom-bar a {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    text-align: center;
-    color: white;
-    text-decoration: none;
-    padding: 3px 0;
-    width: 15%;
-}
-
-.mobile-bottom-bar a:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-.mobile-bottom-bar i {
-    font-size: 18px;
-    margin-bottom: 4px;
-}
-
-.mobile-bottom-bar span {
-    display: block;
-    font-size: 10px;
-    color: #ecf0f1;
-}
-
-#trivia-btn {
-    position: fixed;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-@media (max-width: 767px) {
-    .mobile-bottom-bar {
-        display: flex;
-    }
-
-    #chat-button,
-    #settings-btn,
-    #movie-of-the-day-btn,
-    #movie-match-btn,
-    #movie-timeline-btn,
-    #discussions-btn,
-    #trivia-btn,
-    #menu-btn,
-    #back-to-top-btn {
-        display: none;
-    }
-}
-
-#trivia-label:hover {
-    color: #ff8623;
-}
-
-#trivia-label {
-    margin-top: 50px
-}
-
-.button-container {
-    display: flex;
-    justify-content: center;
-}
-
-#clear-search-btn {
-    display: block;
-    margin: 20px auto;
-    background-color: #7378c5;
-    color: black;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-left: 10px;
-    font: inherit;
-    margin-right: 20px;
-}
-
-#quiz-container {
-    background-color: rgba(255, 255, 255, 0.2);
-    padding: 20px;
-    border-radius: 10px;
-    max-width: calc(100% - 20px);
-    width: 600px;
-    margin: 10px auto;
-    box-sizing: border-box;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-#quiz-form {
-    width: calc(100% - 20px);
-    margin: 10px auto;
-    box-sizing: border-box;
-    padding: 0 10px;
-}
-
-@media (max-width: 520px) {
-    #quiz-container, #quiz-form {
-        width: calc(100% - 20px);
-        margin: 10px auto;
-    }
-}
-
-.button {
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 20px;
-}
-
-#clear-search-btn:hover {
-    background-color: #ff8623;
-}
-
-.side-nav {
-    position: fixed;
-    left: -250px;
-    top: 0;
-    width: 250px;
-    height: 100%;
-    background-color: #373b69;
-    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
-    overflow-y: auto;
-    transition: left 0.39s;
-    z-index: 1000;
-}
-
-.side-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.side-nav ul li {
-    padding: 15px 20px;
-    border-radius: 8px;
-    text-align: left;
-}
-
-.side-nav ul li a {
-    color: white;
-    text-decoration: none;
-    display: block;
-    padding-left: 5px;
-}
-
-.side-nav ul li a:hover {
-    background-color: #ff8623;
-    border-radius: 8px;
-}
-
-.nav-toggle {
-    background-color: #7378c5;
-    border: none;
-    color: white;
-    cursor: pointer;
-    font-size: 1.5rem;
-    top: 5px;
-    left: 15px;
-    border-radius: 8px;
-    padding: 3.5px;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    display: flex;
-    position: fixed;
-    justify-content: center;
-    align-items: center;
-    padding-left: 4.25px;
-}
-
-.nav-toggle i {
-    line-height: inherit;
-}
-
-.nav-toggle:hover {
-    background-color: #ff8623;
-    transition: 0.3s ease-in;
-}
-
-#button-remove {
-    color: #171616;
-    background-color: #7378c5;
-    font: inherit;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 15px;
-}
-
-#button-remove:hover {
-    background-color: #ff8623;
-    transition: 0.1s linear;
-}
-
-@media (max-width: 900px) {
-    #profileBtn {
-        display: none;
-    }
-}
-
-@media (max-width: 840px) {
-    #my-heading {
-        margin-left: 0;
-    }
-
-    .back-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: -180px;
-        border-radius: 8px;
-    }
-
-    .about {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        width: 85px;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 0;
-        border-radius: 8px;
-    }
-
-    .favorites-btn {
-        background-color: #7378c5;
-        border: none;
-        color: white;
-        height: 40px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font: inherit;
-        font-size: 16px;
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        margin-left: 189px;
-        border-radius: 8px;
-        padding-left: 12px;
-        padding-right: 12px;
-        box-sizing: border-box;
-    }
-
-    #googleSignInBtn {
-        display: none;
-    }
-
-    header {
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    main {
-        margin-bottom: -40px;
-        justify-content: space-between;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    #trivia-label {
-        margin-top: 60px;
-    }
-}
-
-#movie-match-btn2 {
-    position: fixed;
-    bottom: 180px;
-    right: 20px;
-    background-color: #7378c5;
-    font: inherit;
-    color: black;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
diff --git a/MovieVerse-Mobile/www/html/about.html b/MovieVerse-Mobile/www/html/about.html
deleted file mode 100644
index 87048c73..00000000
--- a/MovieVerse-Mobile/www/html/about.html
+++ /dev/null
@@ -1,1286 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>About The MovieVerse - Your Ultimate Movie Guide</title>
-    <meta property="og:title" content="About The MovieVerse - Your Ultimate Movie Guide" />
-    <meta name="description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/about.html"/>
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Learn about The MovieVerse, your ultimate movie guide. Discover our mission, features, and how we create a haven for movie enthusiasts to explore cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#aboutHeader">About The MovieVerse</a></li>
-            <li><a href="#subheading1">Core Features</a></li>
-            <li><a href="#subheading2">Explore Our Other Apps</a></li>
-            <li><a href="#subheading">Our Vision</a></li>
-            <li><a href="#subheading3">Join The Journey</a></li>
-            <li><a href="#subheading4">Useful Links</a></li>
-            <li><a href="terms-of-service.html">Terms of Service</a></li>
-            <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-
-    <main id="main2" style="margin: 0 auto">
-        <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
-        <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
-        <div style="width: 100%">
-            <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
-        </div>
-
-        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
-        <h3 id="subheading1" style="cursor: pointer">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">
-            <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 specialized sections like Director's Spotlight and award-winning films.</li>
-            <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
-            <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Interactive Discussions and Trivia:</strong> Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.</li>
-            <li><i style="margin-right: 3px" class="fas fa-fire"></i> <strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.</li>
-            <li><i style="margin-right: 3px" class="fas fa-clock"></i> <strong>Movie Timeline:</strong> Select a period and explore a curated list of movies from that era, offering a unique way to experience the evolution of film over time.</li>
-            <li><i style="margin-right: 3px" class="fas fa-heart"></i> <strong>Movie Match/Recommendation:</strong> Find or get recommended a movie that matches your mood, genre, and time period, ensuring you always find the perfect movie to watch.</li>
-            <li><i style="margin-right: 3px" class="fas fa-info-circle"></i> <strong>Detailed Filmography Insights:</strong> Delve into the careers of your favorite <a id="githubLink1" href="director-details.html">directors</a>, <a id="githubLink1" href="actor-details.html">actors</a>, and <a id="githubLink1" href="company-details.html">companies</a> with dedicated pages detailing their filmography and impact on cinema.</li>
-            <li><i style="margin-right: 3px" class="fas fa-sign-in-alt"></i> <strong>Sign In/Sign Out:</strong> Sign in to your account to access your personalized movie recommendations, <a id="githubLink1" href="favorites.html">watch lists</a>, <a id="githubLink1" href="user-profile.html">profile</a>, and more.</li>
-            <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Watch Lists:</strong> Save movies to your watch lists and share them with your loved ones, ensuring you never miss out on a movie you want to watch. If you're signed in, your watch lists are <a id="githubLink1" href="favorites.html">accessible</a> across all your devices!</li>
-            <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Chat Functionality:</strong> Engage with fellow movie enthusiasts through our secure <a id="githubLink1" href="chat.html">chat</a> feature, where you can discuss and connect with like-minded MovieVerse individuals!</li>
-            <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Search Functionality:</strong> Use our extensive <a id="githubLink1" href="search.html">search</a> functionality to find movies, actors, directors, and TV series, ensuring you always find what you're looking for.</li>
-            <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
-            <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
-        </ul>
-
-        <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
-        <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
-
-        <ul style="align-content: center; color: white">
-            <li>
-                <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';" class="app-btn">The StickyNotes App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Embark on a culinary adventure with RecipeGenie, your go-to database for delightful recipes.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';" class="app-btn">The RecipeGenie Database</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Stay ahead of the weather with WeatherMate, your personal weather forecasting assistant.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';" class="app-btn">The WeatherMate App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Keep track of your tasks and boost productivity with the ToDo App, a straightforward task manager.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-ToDo-App/';" class="app-btn">The ToDo App</button>
-            </li>
-            <li>
-                <p style="color: black; text-align: center">Plan and manage your events seamlessly with EventHorizon, your ultimate event organizer.</p>
-                <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
-            </li>
-        </ul>
-
-        <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
-        <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
-        <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
-        <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
-        <br/>
-        <p style="color: white; text-align: center">Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of movies!</p>
-        <br/>
-        <p style="color: white; text-align: center">
-            <em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <strong><a style="color: #ff8623" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a></strong>.
-                <i style="margin-left: 3px" class="fab fa-github"></i>
-            </em>
-        </p>
-
-        <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
-        <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
-        <br/>
-        <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
-        <br/>
-        <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
-        <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
-        <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
-        <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
-        <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
-    </main>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
-        </a>
-    </footer>
-
-    <script>
-        document.getElementById('logo').addEventListener('click', function() {
-            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
-
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-
-        document.getElementById('logo').addEventListener('mouseover', function() {
-            this.style.cursor = 'pointer';
-            this.style.transform = 'scale(1.05)';
-            this.style.transition = '0.3s ease-in-out';
-        });
-
-        document.getElementById('logo').addEventListener('mouseout', function() {
-            this.style.transform = 'scale(1)';
-        });
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById("subheading1").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading2").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading2').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading3").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading3').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("subheading4").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('subheading4').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById("aboutHeader").addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('aboutHeader').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/actor-details.html b/MovieVerse-Mobile/www/html/actor-details.html
deleted file mode 100644
index e96b40fe..00000000
--- a/MovieVerse-Mobile/www/html/actor-details.html
+++ /dev/null
@@ -1,808 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Actor Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html">
-    <meta property="og:title" content="Actor Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Discover detailed insights into your favorite actors on The MovieVerse. Explore filmographies, biographies, and more to learn about the stars of cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        #actor-details-container {
-            margin-top: 0;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #actor-details-container {
-                margin-top: 25px;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #actor-details-container {
-            margin-top: 25px;
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <main id="main" style="margin-left: 25px; height: 0"></main>
-
-    <div class="details-container" id="actor-details-container" style="margin-bottom: 70px;">
-        <!-- Left side for Actor Image -->
-        <div class="actor-left" style="overflow-y: hidden">
-            <h2 id="actor-name" class="actor-header"></h2>
-            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
-            <div style="height: 20px"></div>
-        </div>
-        <!-- Right side for Description and Info -->
-        <div class="actor-right" id="actor-description">
-            <!-- Actor details will be populated here -->
-        </div>
-    </div>
-
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script src="../js/actor-details.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('actor-image').addEventListener('click', function() {
-            const imageUrl = this.src.replace('w1280', 'original')
-            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/analytics.html b/MovieVerse-Mobile/www/html/analytics.html
deleted file mode 100644
index 9b02e879..00000000
--- a/MovieVerse-Mobile/www/html/analytics.html
+++ /dev/null
@@ -1,910 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Database Analytics - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html">
-    <meta property="og:title" content="Database Analytics - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/analytics.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="The MovieVerse - Your Ultimate Movie Guide">
-    <meta name="twitter:description" content="Explore MovieVerse Analytics for insights on movies, genres, releases, and more. Discover cinematic trends through data analysis.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="https://movie-verse.com/MovieVerse-Frontend/css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("https://movie-verse.com/images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @keyframes fadeInUp {
-            0% {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: fadeInUp 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: fadeInUp 1s ease forwards 0.5s;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        @keyframes dropIn {
-            0% {
-                opacity: 0;
-                transform: translateY(-50px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: dropIn 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1s;
-        }
-        #local-time {
-            cursor: pointer;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1.5s;
-        }
-        #local-time p,
-        #local-time div {
-            opacity: 0;
-            animation: dropIn 1s ease forwards 2s;
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0" class="notranslate">
-            <h1 id="my-heading" style="margin-bottom: -10px">
-                The Mo<span class="highlight">vieV</span>erse
-            </h1>
-        </a>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="#chart1">Annual Releases</a></li>
-            <li><a href="#chart2">Genre Popularity</a></li>
-            <li><a href="#chart3">Certification Breakdown</a></li>
-            <li><a href="#chart4">Popularity Trends</a></li>
-            <li><a href="#chart5">Language Counts</a></li>
-            <li><a href="#chart6">Votes by Genre</a></li>
-            <li><a href="#chart7">Monthly Releases</a></li>
-            <li><a href="#chart8">Decadal Releases</a></li>
-            <li><a href="#chart9">Country Releases</a></li>
-            <li><a href="#chart11">Yearly Top Movies</a></li>
-            <li><a href="#chartVotesOverYears">Votes Over Time</a></li>
-            <li><a href="#chartHighlyRatedMovies">Top Movies Trends</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-        </ul>
-    </nav>
-    <div>
-        <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div class="chart-container" style="margin-bottom: 250px">
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title1" style="cursor: pointer">Number of Movies Released Each Year</h2>
-            <canvas id="chart1"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title2" style="cursor: pointer">Popularity of Genres</h2>
-            <canvas id="chart2"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title3" style="cursor: pointer">Movies Distribution by Certification</h2>
-            <canvas id="chart3"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title4" style="cursor: pointer">Average Movie Popularity Over Time</h2>
-            <canvas id="chart4"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title5" style="cursor: pointer">Movies Count by Original Language</h2>
-            <canvas id="chart5"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title6" style="cursor: pointer">Average Vote Count by Genre</h2>
-            <canvas id="chart6"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title7" style="cursor: pointer">Movie Releases by Month</h2>
-            <canvas id="chart7"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title8" style="cursor: pointer">Movie Releases by Decades</h2>
-            <canvas id="chart8"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title9" style="cursor: pointer">Movie Releases by Countries</h2>
-            <canvas id="chart9"></canvas>
-        </div>
-        <div class="chart-box" id="chart-title1">
-            <h2 class="chart-title" id="chart-title10" style="cursor: pointer">Top Rated Movies per Year</h2>
-            <canvas id="chart11"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title11" style="cursor: pointer">Total Movie Votes Over Years</h2>
-            <canvas id="chartVotesOverYears"></canvas>
-        </div>
-        <div class="chart-box">
-            <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated Movies Over Years</h2>
-            <canvas id="chartHighlyRatedMovies"></canvas>
-        </div>
-    </div>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="ad-container2" style="display: block; text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script src="../js/analytics.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData1()}/3/search/multi?${getMovieNames1()}${getMovieCode1()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.error("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.error('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData1()}/3/person/${item.id}?${getMovieNames1()}${getMovieCode1()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.error('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.error('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        function getMovieVerseData1(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function getMovieNames1(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode1() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/api_fails.html b/MovieVerse-Mobile/www/html/api_fails.html
deleted file mode 100644
index c7fa1c18..00000000
--- a/MovieVerse-Mobile/www/html/api_fails.html
+++ /dev/null
@@ -1,1026 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>We're Offline - The MovieVerse</title>
-    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html">
-    <meta property="og:title" content="We're Offline - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/api_fails.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="We're Offline - The MovieVerse">
-    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="center-text" style="padding: 120px;">
-        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">MovieVerse is Offline</div>
-        <p>We're sorry, our service is currently unavailable. This could be due to a temporary issue with our servers or your internet connection. Please try again.</p>
-        <p>If you continue to experience issues, please contact our support team at <a id="link" href="support.html">our support page</a>.</p>
-        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
-    </div>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 500px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/article.hbs b/MovieVerse-Mobile/www/html/article.hbs
deleted file mode 100644
index 644be6cd..00000000
--- a/MovieVerse-Mobile/www/html/article.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{article.title}}</title>
-</head>
-<body>
-  <header>
-    <h1>{{article.title}}</h1>
-    <p>Written by: {{article.author}}</p>
-  </header>
-  <article>
-    <p>{{article.content}}</p>
-  </article>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/chat.html b/MovieVerse-Mobile/www/html/chat.html
deleted file mode 100644
index 4054ba67..00000000
--- a/MovieVerse-Mobile/www/html/chat.html
+++ /dev/null
@@ -1,1023 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Chat - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Chat - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chat.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chat.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Chat - The MovieVerse">
-    <meta name="twitter:description" content="Chat with other users on The MovieVerse. Share your thoughts, reviews, and recommendations with the community!">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .user-search-result {
-            background-color: #333;
-            margin: 10px auto;
-            padding: 10px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            color: white;
-            transition: background-color 0.3s ease;
-            flex-wrap: wrap;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-        }
-        .user-search-result img {
-            flex-shrink: 0;
-            margin-right: 10px;
-            border-radius: 8px;
-        }
-        .user-search-result > div {
-            flex: 1;
-            min-width: 120px;
-            word-break: break-word;
-        }
-        .tooltip {
-            position: absolute;
-            background-color: #333;
-            color: white;
-            padding: 5px 10px;
-            border-radius: 5px;
-            z-index: 100;
-            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-            white-space: nowrap;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        #main {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            min-height: 80vh;
-        }
-        #userListContainer {
-            flex-basis: 30%;
-            background-color: rgba(0, 0, 0, 0.7);
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-        }
-        #searchUserInput {
-            width: 100%;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #ff8623;
-            margin-bottom: 10px;
-            background-color: #333;
-            color: white;
-        }
-        @media (min-width: 768px) {
-            #searchUserInput {
-                min-width: 320px;
-            }
-        }
-        .user:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .user {
-            border-radius: 8px;
-            padding: 5px;
-            cursor: pointer;
-        }
-        .user-item {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-            background-color: #333;
-            color: white;
-        }
-        .user-item:hover {
-            background-color: #ff8623;
-        }
-        .user-avatar {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            margin-right: 10px;
-        }
-        .user-info {
-            flex-grow: 1;
-        }
-        .user-email {
-            font-weight: bold;
-        }
-        .user-bio {
-            color: #ccc;
-        }
-        #chatSection {
-            display: flex;
-            flex-direction: column;
-            flex-basis: 65%;
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-            min-height: 90vh;
-        }
-        #messages {
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 20px;
-            background: none;
-            display: flex;
-            flex-direction: column;
-            border-radius: 8px;
-        }
-        #chatInput {
-            padding: 10px;
-            border-top: 1px solid #ccc;
-        }
-        #userEmailDisplay {
-            background-color: #ff8623;
-            color: white;
-            border-radius: 10px;
-            padding: 10px;
-        }
-        .message {
-            margin: 5px 0;
-            padding: 10px;
-            border-radius: 8px;
-            max-width: 80%;
-            word-wrap: break-word;
-        }
-        .my-message {
-            align-self: flex-end;
-            background-color: #ff8623;
-            color: white;
-        }
-        .other-message {
-            align-self: flex-start;
-            background-color: #7378c5;
-            color: white;
-        }
-        #chatInput {
-            padding: 10px;
-            border-top: 1px solid #ccc;
-        }
-        #messageInput {
-            flex-grow: 1;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #ff8623;
-            background-color: #333;
-            color: white;
-            width: 100%;
-        }
-        #sendButton {
-            padding: 10px 20px;
-            border-radius: 5px;
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #sendButton:hover {
-            background-color: #7f4caf;
-        }
-        #main {
-            display: flex;
-            justify-content: space-between;
-            align-items: stretch;
-            min-height: 80vh;
-            gap: 20px;
-        }
-        #userListContainer {
-            flex: 1;
-            background-color: rgba(0, 0, 0, 0.7);
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-        }
-        #chatSection {
-            flex: 2;
-            display: flex;
-            flex-direction: column;
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            color: white;
-            padding: 20px;
-        }
-        @media (max-width: 900px) {
-            #main {
-                flex-direction: column;
-                align-items: center;
-                width: 100%;
-                margin-left: 0;
-            }
-            #userListContainer, #chatSection {
-                width: 90% !important;
-                margin: 0 auto;
-                max-width: 100% !important;
-                display: flex;
-                flex-direction: column;
-            }
-            #userList {
-                max-height: 300px;
-                overflow-y: auto;
-            }
-            #chatSection {
-                width: 100% !important;
-                flex-grow: 1;
-            }
-            #noUserSelected {
-                width: 90% !important;
-                flex-grow: 1;
-            }
-        }
-        .selected-user {
-            background-color: #ff8623;
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <main id="main" style="margin-bottom: 20px">
-        <div id="userListContainer">
-            <div id="searchContainer">
-                <input type="text" id="searchUserInput" placeholder="Search for a user" style="font: inherit" />
-            </div>
-            <div id="searchUserResults"></div>
-            <h3>Recent & Suggested Chats</h3>
-            <div id="userList"></div>
-        </div>
-        <div id="chatSection">
-            <div id="userEmailDisplay" style="padding: 10px;"></div>
-            <div id="messages"></div>
-            <div id="chatInput">
-                <input type="text" id="messageInput" placeholder="Type your message" style="font: inherit" />
-                <button id="sendButton">Send</button>
-            </div>
-        </div>
-        <div id="noUserSelected" style="flex-basis: 65%; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; color: white; display: flex; justify-content: center; align-items: center; min-height: 90vh;">
-            <p>Welcome to MovieVerse Chats! Select or find a user to begin chatting with your fellow movie enthusiasts!</p>
-        </div>
-    </main>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-        <p style="color: white; margin-left: 10px">Loading chats...</p>
-    </div>
-    <footer id="footer">
-        <p>© 2024 The MovieVerse. All rights reserved.</p>
-    </footer>
-    <script type="module" src="../js/chat.js"></script>
-    <script src="../js/chat-auxiliary.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/chatbot.html b/MovieVerse-Mobile/www/html/chatbot.html
deleted file mode 100644
index c3f9dc5c..00000000
--- a/MovieVerse-Mobile/www/html/chatbot.html
+++ /dev/null
@@ -1,846 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Chatbot - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html">
-    <meta property="og:title" content="Chatbot - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Chatbot - The MovieVerse">
-    <meta name="twitter:description" content="Chat with the MovieVerse bot for instant movie insights. Discover films, actors, and directors in an engaging conversation.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="manifest" href="../../manifest.json">
-    <script type="importmap">
-        {
-          "imports": {
-            "@google/generative-ai": "https://esm.run/@google/generative-ai"
-          }
-        }
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        #header {
-            margin-top: 26px;
-            padding-left: 25px;
-        }
-        #form {
-            margin-top: -5px;
-            margin-right: 55px;
-        }
-        @media (max-width: 800px){
-            #header {
-                margin-top: 10px;
-            }
-            #form {
-                margin-top: -15px;
-                margin-right: 0;
-            }
-        }
-        @media (min-width: 900px) {
-            #header {
-                margin-top: 26px;
-                padding-left: 25px;
-            }
-            #form {
-                margin-top: 2px;
-            }
-            #my-heading {
-                margin-top: 17px !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #my-heading {
-                margin-top: 9px !important;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        #homepage-header {
-            margin-top: -10px;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-            #homepage-header {
-                margin-top: 10px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="bot-header">
-        <h2 id="search-title">The <span class="highlight1">MovieVerse</span> Assistant</h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-        <h4 id="alt-title" style="font-weight: normal; font-size: 15px; color: #ff8623">Dive deep into the movie world with our expert assistant!</h4>
-    </div>
-    <main id="main" style="padding: 0; margin: 0 auto; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 400px">
-        <div id="chatbotContainer">
-            <div id="chatbotHeader">The MovieVerse Assistant</div>
-            <div id="chatbotBody"></div>
-            <input id="chatbotInput" type="text" placeholder="Ask me about anything..." title="Type your message here"/>
-            <button id="sendButton" title="Send this message">Send</button>
-        </div>
-    </main>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/chatbot.js" type="module"></script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-        <p style="color: white; margin-left: 10px">Loading response...</p>
-    </div>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; color: white; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-            });
-
-            function displaySearchResults(results) {
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-                    details.style.textAlign = 'left';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-    </script>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/christopher-nolan.html b/MovieVerse-Mobile/www/html/christopher-nolan.html
deleted file mode 100644
index 2874ec08..00000000
--- a/MovieVerse-Mobile/www/html/christopher-nolan.html
+++ /dev/null
@@ -1,497 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Director Details - Explore More About Christopher Nolan</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/christopher-nolan.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html">
-    <meta property="og:title" content="Director Details - Christopher Nolan">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Director Details - Christopher Nolan">
-    <meta name="twitter:description" content="Explore the illustrious career of Christopher Nolan, a visionary director known for his innovative storytelling and technical prowess in the movie industry.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" style="margin-left: 25px">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 25px; margin-bottom: -40px">
-
-    </main>
-
-    <div class="details-container" id="director-details-container">
-        <!-- Left side for Director Image -->
-        <div class="director-left" style="overflow: hidden">
-            <h2 id="director-name" class="director-header"></h2>
-            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; overflow: hidden"/>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="director-right" id="director-description">
-            <!-- Director details will be populated here -->
-        </div>
-    </div>
-
-    <script src="../js/christopher-nolan.js"></script>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-
-<script>
-    function getMovieVerseData(input) {
-        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-    }
-
-    async function showMovieOfTheDay() {
-        const year = new Date().getFullYear();
-        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-        try {
-            const response = await fetch(url);
-            const data = await response.json();
-            const movies = data.results;
-
-            if (movies.length > 0) {
-                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                localStorage.setItem('selectedMovieId', randomMovie.id);
-                window.location.href = 'movie-details.html';
-            }
-            else {
-                fallbackMovieSelection();
-            }
-        }
-        catch (error) {
-            console.log('Error fetching movie:', error);
-            fallbackMovieSelection();
-        }
-    }
-
-    const movieCode = {
-        part1: 'YzVhMjBjODY=',
-        part2: 'MWFjZjdiYjg=',
-        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-    };
-
-    function getMovieCode() {
-        return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-    }
-
-    function generateMovieNames(input) {
-        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-    }
-
-    function fallbackMovieSelection() {
-        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-        localStorage.setItem('selectedMovieId', randomFallbackMovie);
-        window.location.href = 'movie-details.html';
-    }
-
-    document.getElementById('settings-btn').addEventListener('click', () => {
-        window.location.href = 'settings.html';
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-        applySettings();
-
-        function applySettings() {
-            const savedBg = localStorage.getItem('backgroundImage');
-            const savedTextColor = localStorage.getItem('textColor');
-            const savedFontSize = localStorage.getItem('fontSize');
-
-            if (savedBg) {
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-            }
-            if (savedTextColor) {
-                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                    element.style.color = savedTextColor;
-                });
-            }
-            if (savedFontSize) {
-                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                document.body.style.fontSize = size;
-            }
-        }
-    });
-</script>
-
-</html>
diff --git a/MovieVerse-Mobile/www/html/company-details.html b/MovieVerse-Mobile/www/html/company-details.html
deleted file mode 100644
index f0b6c77c..00000000
--- a/MovieVerse-Mobile/www/html/company-details.html
+++ /dev/null
@@ -1,795 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Company Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/company-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Company Details - The MovieVerse" />
-    <meta name="description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/company-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Company Details - The MovieVerse">
-    <meta name="twitter:description" content="Discover movie production companies on The MovieVerse: explore their films, history, and impact on cinema.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @media (min-width: 800px) {
-            footer {
-                margin-top: 500px;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: 0 !important;
-            }
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 19px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <main id="main" style="margin-left: 25px; height: 0"></main>
-    <div class="details-container" id="company-details-container" style="margin-bottom: 650px">
-        <div class="company-left">
-            <div class="title-logo-container">
-                <h2 id="company-name" class="company-header"></h2>
-                <img id="company-logo" alt="Loading Company Details..." style="z-index: 1000000000; width: 25vw; background-color: #ffffff; border-radius: 8px;"/>
-            </div>
-        </div>
-        <div class="company-right">
-            <p id="company-description" class="company-description"></p>
-            <p><strong>Headquarters:</strong> <span id="company-headquarters"></span></p>
-            <p><strong>Country:</strong> <span id="company-country"></span></p>
-            <p><strong>Website:</strong> <a id="company-website" href="" target="_blank"></a></p>
-            <p style="text-align: center"><strong>Produced Movies:</strong></p>
-            <div style="text-align: center" id="company-movies-list" class="movies-list"></div>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 250px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/company-details.js"></script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('company-logo').addEventListener('click', function() {
-            const imageUrl = this.src.replace('w500', 'original');
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/create-account.html b/MovieVerse-Mobile/www/html/create-account.html
deleted file mode 100644
index ad374615..00000000
--- a/MovieVerse-Mobile/www/html/create-account.html
+++ /dev/null
@@ -1,1052 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Create Account - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html">
-    <meta property="og:title" content="Create Account - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/create-account.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Create Account - The MovieVerse">
-    <meta name="twitter:description" content="Join MovieVerse for personalized movie recommendations, save favorites, and enhance your movie discovery experience.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="theme-color" content="#7378c5">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .account-creation-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .account-creation-form-container input[type="email"],
-        .account-creation-form-container input[type="password"],
-        .account-creation-form-container input[type="text"],
-        .account-creation-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .account-creation-form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-        .account-creation-form-container button:hover {
-            background-color: #22254b;
-            color: white;
-        }
-        .account-creation-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .account-creation-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-        #back-to-sign-in {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #back-to-sign-in:hover {
-            background-color: #22254b;
-            color: white;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0;
-            }
-        }
-        #local-time {
-            transform: translateX(12%);
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="account-creation-form-container" id="account-creation-form-container" style="margin-bottom: 300px">
-        <form id="createAccountForm">
-            <h2>Create Account</h2>
-            <p style="color: black">Create an account to personalize your movie recommendations, save  <a style="text-decoration: underline" id="githubLink1" href="favorites.html">favorites</a>, and enhance your movie discovery experience.</p>
-            <input type="email" id="newEmail" placeholder="Email" required>
-            <input type="password" id="newPassword" placeholder="Password" required>
-            <input type="password" id="confirmPassword" placeholder="Re-type Password" required>
-            <label style="margin-top: 10px; margin-bottom: 10px">
-                <input type="checkbox" id="togglePassword"> Show Password
-            </label>
-            <button type="submit">Create Account</button>
-            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
-        </form>
-    </div>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('newPassword');
-            const confirmPasswordInput = document.getElementById('confirmPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-                confirmPasswordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-                confirmPasswordInput.type = 'password';
-            }
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script src="../js/create-account.js" type="module"></script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-    </script>
-    <footer style="margin-top: 650px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/director-details.html b/MovieVerse-Mobile/www/html/director-details.html
deleted file mode 100644
index 55acbdc4..00000000
--- a/MovieVerse-Mobile/www/html/director-details.html
+++ /dev/null
@@ -1,835 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Director Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/director-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html">
-    <meta property="og:title" content="Director Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/director-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Director Details - The MovieVerse">
-    <meta name="twitter:description" content="Explore the careers and films of over 900,000 directors, highlighting their contributions and standout projects on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        header {
-            margin-top: -5px;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        .movie-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-            margin-top: 7px;
-            padding-top: 5px;
-        }
-        .movie-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .movie-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .movie-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .movie-details {
-            width: 100%;
-        }
-        .movie-title {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="details-container" id="director-details-container" style="margin-top: -50px; margin-bottom: 60px">
-        <!-- Left side for Director Image -->
-        <div class="director-left" style="overflow-y: hidden">
-            <h2 id="director-name" class="director-header"></h2>
-            <img id="director-image" alt="Loading Director Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
-            <div style="height: 20px"></div>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="director-right" id="director-description">
-            <!-- Director details will be populated here -->
-        </div>
-    </div>
-
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 150px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/director-details.js"></script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-
-<script>
-    function getMovieVerseData(input) {
-        return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-    }
-
-    async function showMovieOfTheDay() {
-        const year = new Date().getFullYear();
-        const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-        try {
-            const response = await fetch(url);
-            const data = await response.json();
-            const movies = data.results;
-
-            if (movies.length > 0) {
-                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                localStorage.setItem('selectedMovieId', randomMovie.id);
-                window.location.href = 'movie-details.html';
-            }
-            else {
-                fallbackMovieSelection();
-            }
-        }
-        catch (error) {
-            console.log('Error fetching movie:', error);
-            fallbackMovieSelection();
-        }
-    }
-
-    const movieCode1 = {
-        part1: 'YzVhMjBjODY=',
-        part2: 'MWFjZjdiYjg=',
-        part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-    };
-
-    function getMovieCode() {
-        return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-    }
-
-    function generateMovieNames(input) {
-        return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-    }
-
-    function fallbackMovieSelection() {
-        const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-        const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-        localStorage.setItem('selectedMovieId', randomFallbackMovie);
-        window.location.href = 'movie-details.html';
-    }
-
-    document.getElementById('settings-btn').addEventListener('click', () => {
-        window.location.href = 'settings.html';
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-        applySettings();
-
-        function applySettings() {
-            const savedBg = localStorage.getItem('backgroundImage');
-            const savedTextColor = localStorage.getItem('textColor');
-            const savedFontSize = localStorage.getItem('fontSize');
-
-            if (savedBg) {
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-            }
-            if (savedTextColor) {
-                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                    element.style.color = savedTextColor;
-                });
-            }
-            if (savedFontSize) {
-                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                document.body.style.fontSize = size;
-            }
-        }
-    });
-
-    document.getElementById('director-image').addEventListener('click', function() {
-        const imageUrl = this.src.replace('w1280', 'original');
-        const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-        document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-        document.getElementById('image-modal').addEventListener('click', function(event) {
-            if (event.target === this) {
-                this.remove();
-            }
-        });
-    });
-</script>
-</html>
diff --git a/MovieVerse-Mobile/www/html/favorites.html b/MovieVerse-Mobile/www/html/favorites.html
deleted file mode 100644
index a679ec41..00000000
--- a/MovieVerse-Mobile/www/html/favorites.html
+++ /dev/null
@@ -1,1102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Favorites & Watchlists - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/movie-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Favorites & Watchlists - The MovieVerse" />
-    <meta name="description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Manage your favorite movies and watchlists on The MovieVerse. Keep track of movies you love and organize your watchlists for future viewing." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/favorites.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <script src="../js/settings.js"></script>
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Favorites & Watchlists - The MovieVerse">
-    <meta name="twitter:description" content="Manage your favorite movies and watch lists on The MovieVerse. Keep track of movies you love and organize your watch lists for future viewing.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <script src="../js/favorites.js" type="module"></script>
-    <link rel="manifest" href="../../manifest.json">
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .watchlist-controls {
-            position: absolute;
-            top: 10px;
-            display: flex;
-            align-items: start;
-            gap: 5px;
-        }
-        .watchlist-controls button {
-            background: none;
-            border: none;
-            color: #ff8623;
-            cursor: pointer;
-            height: 20px;
-            width: 20px;
-            margin-right: 8px;
-            font-size: 18px;
-        }
-        #create-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #edit-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #delete-watchlist-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        .watchlist.pinned .watchlist-controls #pin-btn {
-            color: #7378c5;
-        }
-        .watchlist-controls button:hover {
-            color: #7378c5;
-        }
-        .watchlist-controls button:first-child {
-            order: -1;
-        }
-        .watchlist {
-            position: relative;
-            padding-top: 30px;
-        }
-        .watchlist.pinned {
-            border: 2px solid yellow;
-        }
-        .watchlist-buttons-container {
-            display: flex;
-            justify-content: center;
-            gap: 10px;
-            margin-left: 0;
-            margin-top: 35px;
-            margin-bottom: 15px;
-        }
-        @media (max-width: 1200px) {
-            #local-time {
-                display: none;
-            }
-        }
-        #button {
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        #how-to-use {
-            text-align: center;
-            margin-top: 20px;
-            margin-bottom: 60px;
-        }
-        #how-to-use-btn {
-            background-color: #7378c5;
-            color: white;
-            border-radius: 8px;
-            padding: 10px 20px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font: inherit;
-            cursor: pointer;
-            border: none;
-        }
-        #how-to-use-btn:hover {
-            background-color: #ff8623;
-        }
-        #how-to-use-section {
-            max-width: 400px;
-            margin: 20px auto;
-            padding: 15px;
-            background-color: #7378c5;
-            color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            display: none;
-            transition: height 0.5s ease-in-out;
-            margin-bottom: 240px;
-        }
-        #how-to-use-section:hover {
-            background-color: #6e73bd;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #githubLink3 {
-            color: white !important;
-        }
-        #githubLink3:hover {
-            color: #ff8623 !important;
-            transition: 0.1s ease-in;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -30px; padding-top: 19px">
-        <div id="header-title">
-            <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
-                <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                    The Mo<span class="highlight" id="highlight">vieV</span>erse
-                </a>
-            </h1>
-        </div>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 5px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul id="watchlist-links" style="overflow-y: auto">
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-
-    <div class="watchlist-buttons-container">
-        <button id="create-watchlist-btn">Create Watch Lists</button>
-        <button id="edit-watchlist-btn">Edit Watch Lists</button>
-        <button id="delete-watchlist-btn">Delete Watch Lists</button>
-    </div>
-
-    <div id="create-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('create-watchlist-modal')">&times;</span>
-            <h2>Create a Watch List</h2>
-            <form id="create-watchlist-form">
-                <label>Name:</label>
-                <input type="text" id="new-watchlist-name" placeholder="Watchlist's Name" style="font: inherit" required>
-                <div style="height: 20px"></div>
-                <label>Description:</label>
-                <textarea placeholder="Watchlist Description" id="new-watchlist-description" style="font: inherit"></textarea>
-                <button type="submit" id="button" style="display: block; margin-left: auto; color: white; margin-right: auto;">Create</button>
-            </form>
-        </div>
-    </div>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <div id="edit-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('edit-watchlist-modal')">&times;</span>
-            <h2>Edit a Watch List</h2>
-            <form id="edit-watchlist-form">
-                <!-- Dynamically populate this form based on user selection -->
-            </form>
-        </div>
-    </div>
-
-    <div id="delete-watchlist-modal" class="modal" style="z-index: 1000000000">
-        <div class="modal-content">
-            <span class="close-button" title="Close this modal" onclick="closeModal('delete-watchlist-modal')">&times;</span>
-            <h2>Delete Watch Lists</h2>
-            <label>Select watch lists to delete:</label>
-            <form id="delete-watchlist-form">
-                <!-- Dynamically populate this form based on user selection -->
-            </form>
-        </div>
-    </div>
-
-    <div id="watchlists-display-section">
-        <!-- Dynamically populated watch lists will go here -->
-    </div>
-
-    <main id="favorites-main" style="margin-top: 75px; text-align: center"></main>
-    <main id="favorites-main-tv" style="margin-top: 75px; text-align: center"></main>
-
-    <div id="how-to-use">
-        <button id="how-to-use-btn">How to Use</button>
-    </div>
-
-    <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
-        <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
-        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
-        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
-        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
-        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
-        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
-        <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists! 🍿🎬</p>
-    </div>
-
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink3" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" title="Go to top" style="bottom: 90px; right: 10px; z-index: 10012" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">Back to Top</button>
-    <script src="../js/movie-details.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script type="module">
-        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
-        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
-
-        let initialMoviesSelection = [];
-        let initialTVSeriesSelection = [];
-
-        function translateFBC(value) {
-            return atob(value);
-        }
-
-        function getFBConfig1() {
-            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
-            return translateFBC(fbConfig1);
-        }
-
-        function getFBConfig2() {
-            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
-            return translateFBC(fbConfig2);
-        }
-
-        function getFBConfig3() {
-            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
-            return translateFBC(fbConfig3);
-        }
-
-        function getFBConfig4() {
-            const fbConfig4 = "ODAyOTQzNzE4ODcx";
-            return translateFBC(fbConfig4);
-        }
-
-        function getFBConfig5() {
-            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
-            return translateFBC(fbConfig5);
-        }
-
-        const firebaseConfig = {
-            apiKey: getFBConfig1(),
-            authDomain: getFBConfig2(),
-            projectId: "movieverse-app",
-            storageBucket: getFBConfig3(),
-            messagingSenderId: getFBConfig4(),
-            appId: getFBConfig5()
-        };
-
-        const app = initializeApp(firebaseConfig);
-        const db = getFirestore(app);
-
-        async function loadNavWatchlistLinks() {
-            const navList = document.getElementById('watchlist-links');
-            const firstStaticItem = navList.querySelector('li');
-
-            try {
-                showSpinner();
-
-                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                let watchlists = [];
-
-                if (currentUserEmail) {
-                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
-                    const querySnapshot = await getDocs(q);
-                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
-                }
-                else {
-                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
-                }
-
-                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
-                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
-
-                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
-
-                let counter = 1;
-
-                watchlists.forEach(watchlist => {
-                    const listItem = document.createElement('li');
-                    listItem.className = 'dynamic';
-                    const link = document.createElement('a');
-                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
-
-                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
-                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
-                        counter++;
-                    }
-                    else {
-                        link.textContent = watchlist.name;
-                    }
-
-                    listItem.appendChild(link);
-                    navList.insertBefore(listItem, firstStaticItem);
-                });
-
-                hideSpinner();
-                assignIdsToWatchlists();
-            }
-            catch (error) {
-                console.error('Error loading watchlists for navigation:', error);
-                hideSpinner();
-            }
-        }
-
-        function assignIdsToWatchlists() {
-            document.querySelectorAll('.watchlist').forEach(watchlist => {
-                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
-                if (!watchlist.id) {
-                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
-                }
-            });
-        }
-
-        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
-    </script>
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/feedback.html b/MovieVerse-Mobile/www/html/feedback.html
deleted file mode 100644
index 41e43187..00000000
--- a/MovieVerse-Mobile/www/html/feedback.html
+++ /dev/null
@@ -1,1107 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Feedback - The MovieVerse</title>
-    <meta name="description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them." />
-    <meta property="og:title" content="Feedback - The MovieVerse">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/feedback.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Feedback - The MovieVerse">
-    <meta name="twitter:description" content="Share your feedback, suggestions, or any issues you've encountered while using MovieVerse. We'll do our best to address them.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .form-container h1 {
-            color: #ff8623;
-        }
-        .form-container input,
-        .form-container textarea,
-        .form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .form-container button[type="submit"]:hover {
-            background-color: #ff8623;
-        }
-        .form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        #supportBtn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #supportBtn:hover {
-            background-color: #ff8623;
-        }
-        @media (min-width: 900px) {
-            #my-heading {
-                margin-top: 15px !important;
-            }
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="form-container">
-        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Feedback</div>
-        <p style="color: black">Noticed a bug? Have a suggestion? Wrong movie information? Or just want to say hi? We'd love to hear from you!</p>
-        <form action="https://formspree.io/f/xqkrbdqd" method="POST">
-            <input type="text" id="name" name="name" placeholder="Your Name" required>
-            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
-            <textarea id="message" name="message" placeholder="Your Feedback" required></textarea>
-            <button type="submit">Send Feedback</button>
-            <p style="color: black">Need immediate assistance? Submit a support request using the link below and we'll get back to you as soon as possible.</p>
-        </form>
-        <button id="supportBtn" onclick="window.location.href='support.html'">Request Support</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 200px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/inception.html b/MovieVerse-Mobile/www/html/inception.html
deleted file mode 100644
index 897d13a4..00000000
--- a/MovieVerse-Mobile/www/html/inception.html
+++ /dev/null
@@ -1,521 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Details - Explore Inception by Christopher Nolan</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/inception.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/inception.html">
-    <meta property="og:title" content="Movie Details - Explore Inception by Christopher Nolan">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/inception.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/inception.jpg"/>
-    <meta property="og:image:alt" content="Inception Movie Poster">
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Details - Explore Inception by Christopher Nolan">
-    <meta name="twitter:description" content="Explore details, reviews, and insights on Inception, a groundbreaking sci-fi film directed by Christopher Nolan, on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px">
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 35px; margin-top: 20px">
-
-    </main>
-
-    <div class="details-container" id="movie-details-container">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw"/>
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px"><strong>0.0/5.0</strong></span>
-        </div>
-
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-            <div id="comments-section">
-                <h3>Community Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Toggle Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This Movie</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname" required>
-                            <textarea id="user-comment" placeholder="Your comment" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your ideas!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </div>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script src="../js/inception.js"></script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('movie-image').addEventListener('click', function() {
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-
-    <script src="../js/comments.js" type="module"></script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/html/leonardo-dicaprio.html b/MovieVerse-Mobile/www/html/leonardo-dicaprio.html
deleted file mode 100644
index 18a4d369..00000000
--- a/MovieVerse-Mobile/www/html/leonardo-dicaprio.html
+++ /dev/null
@@ -1,470 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Actor Details - Leonardo DiCaprio</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta name="description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html">
-    <meta property="og:title" content="Actor Details - Leonardo DiCaprio">
-    <meta property="og:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Actor Details - Leonardo DiCaprio">
-    <meta name="twitter:description" content="Dive into the career of Leonardo DiCaprio, featuring his filmography, latest movies, and achievements, on The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <script src="../js/leonardo-dicarprio.js" defer></script>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        body {
-            background-image: url("https://movie-verse.com/images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-
-            <div id="search-results" class="search-results"></div>
-
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="genres" style="margin-left: 25px">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
-    <main id="main" style="margin-left: 25px"></main>
-
-    <div class="details-container" id="actor-details-container">
-        <!-- Left side for Actor Image -->
-        <div class="actor-left" style="overflow: hidden">
-            <h2 id="actor-name" class="actor-header"></h2>
-            <img id="actor-image" alt="Loading Actor Details..." style="width: 25vw"/>
-        </div>
-
-        <!-- Right side for Description and Info -->
-        <div class="actor-right" id="actor-description">
-            <!-- Actor details will be populated here -->
-        </div>
-    </div>
-
-    <script src="../js/leonardo-dicarprio.js"></script>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 160px; right: 10px">Surprise Me!</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'movie-of-the-day-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'movie-of-the-day-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('actor-image').addEventListener('click', function() {
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-
-</html>
diff --git a/MovieVerse-Mobile/www/html/movie-details.html b/MovieVerse-Mobile/www/html/movie-details.html
deleted file mode 100644
index bfc4fb00..00000000
--- a/MovieVerse-Mobile/www/html/movie-details.html
+++ /dev/null
@@ -1,907 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/movie-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html">
-    <meta property="og:title" content="Movie Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Details - The MovieVerse">
-    <meta name="twitter:description" content="Explore in-depth movie details including cast, synopsis, ratings, and community comments and reviews on more than 1 million movies at The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        #favorite-btn:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        .favorited:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #movie-details-container {
-                margin-top: -50px;
-            }
-        }
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #rating-header {
-            color: #ffeb3b;
-        }
-        #rating-header:hover {
-            color: #ff8623;
-            transition: 0.2s ease-in;
-        }
-        #movie-details-container {
-            margin-top: 39px;
-        }
-        .movie-left {
-            margin-top: -10px;
-        }
-        @media (max-width: 767px) {
-            #movie-details-container {
-                margin-top: 0;
-            }
-            #form1 {
-                margin-bottom: 39px;
-            }
-            .movie-left {
-                margin-top: -40px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" >
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none; height: 0">
-        <h2 id="search-title"></h2>
-    </div>
-    <main id="main" style="margin-left: 35px; height: 0"></main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
-            <div id="comments-section">
-                <h3>Movie Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Toggle Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal" style="z-index: 100005">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This Movie</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
-                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this movie">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right" style="position: relative; overflow: hidden">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: -20px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/movie-details.js"></script>
-    <script src="../js/add-to-favorites.js" type="module"></script>
-    <script type="module">
-        import { toggleFavorite, checkAndUpdateFavoriteButton } from '../js/add-to-favorites.js';
-
-        document.addEventListener('DOMContentLoaded', () => {
-            const favoriteBtn = document.getElementById('favorite-btn');
-            if (favoriteBtn) {
-                favoriteBtn.addEventListener('click', toggleFavorite);
-            }
-        });
-
-        checkAndUpdateFavoriteButton();
-    </script>
-    <script type="module">
-        import { loadUserRatings, updateAverageMovieRating } from '../js/ratings-module.js';
-
-        document.addEventListener('DOMContentLoaded', async () => {
-            const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-            const savedRatings = await loadUserRatings(currentUserEmail);
-            const movieId = localStorage.getItem('selectedMovieId');
-            const movieRating = savedRatings[movieId] || 0;
-            setStarRating(movieRating);
-        });
-
-        function setStarRating(rating) {
-            const stars = document.querySelectorAll('.rating .star');
-            stars.forEach(star => {
-                star.style.color = star.dataset.value > rating ? 'white' : 'gold';
-            });
-            document.getElementById('rating-value').textContent = `${rating}.0/5.0`;
-        }
-
-        let isHovering = false;
-
-        const stars = document.querySelectorAll('.rating .star');
-        stars.forEach(star => {
-            star.addEventListener('mouseover', (e) => {
-                isHovering = true;
-                setStarRating(e.target.dataset.value);
-            });
-
-            star.addEventListener('mouseout', () => {
-                isHovering = false;
-                setTimeout(() => {
-                    if (!isHovering) {
-                        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                        loadUserRatings(currentUserEmail).then(savedRatings => {
-                            const movieId = localStorage.getItem('selectedMovieId');
-                            const movieRating = savedRatings[movieId] || 0;
-                            setStarRating(movieRating);
-                        });
-                    }
-                }, 10);
-            });
-
-            star.addEventListener('click', async (e) => {
-                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-                const movieId = localStorage.getItem('selectedMovieId');
-                const rating = e.target.dataset.value;
-                await updateAverageMovieRating(currentUserEmail, movieId, rating);
-                window.location.reload();
-            });
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <script>
-        document.getElementById('movie-image').addEventListener('click', function() {
-            let imageUrl = this.src.replace('w780', 'original');
-            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
-                                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                            </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-    <script src="../js/comments.js" type="module"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/movie-match.html b/MovieVerse-Mobile/www/html/movie-match.html
deleted file mode 100644
index 6d4e0045..00000000
--- a/MovieVerse-Mobile/www/html/movie-match.html
+++ /dev/null
@@ -1,854 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Match - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html">
-    <meta property="og:title" content="Movie Match - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Match - The MovieVerse">
-    <meta name="twitter:description" content="Find your perfect movie match based on mood, genre, and era using The MovieVerse's tailored movie discovery feature. Start exploring now.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #search {
-            margin-top: -1px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px; margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <main id="movie-match-main" style="margin-bottom: 45vh">
-        <div class="movie-match-container">
-            <h2 id="search-title1">Find Your Movie Match</h2>
-            <form id="movie-match-form">
-                <label for="mood">Select Your Mood:</label>
-                <select id="mood">
-                    <option value="happy">Happy</option>
-                    <option value="sad">Sad</option>
-                    <option value="angry">Scary</option>
-                    <option value="adventurous">Adventurous</option>
-                    <option value="romantic">Romantic</option>
-                    <option value="thoughtful">Thoughtful</option>
-                </select>
-                <label for="genre">Preferred Genre:</label>
-                <select id="genre">
-                    <option value="action">Action</option>
-                    <option value="comedy">Comedy</option>
-                    <option value="drama">Drama</option>
-                    <option value="sci-fi">Sci-Fi</option>
-                    <option value="romance">Romance</option>
-                </select>
-                <label for="period">Time Period:</label>
-                <select id="period">
-                    <option value="2020s">2020s</option>
-                    <option value="2010s">2010s</option>
-                    <option value="2000s">2000s</option>
-                    <option value="90s">90s</option>
-                    <option value="80s">80s</option>
-                </select>
-                <input type="submit" value="Get Matched Movie">
-            </form>
-        </div>
-    </main>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script src="../js/movie-match.js"></script>
-    <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.error("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.error('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.error('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.error('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.error('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script>
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <footer style="margin-top: 0">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/movie-timeline.html b/MovieVerse-Mobile/www/html/movie-timeline.html
deleted file mode 100644
index c59d916d..00000000
--- a/MovieVerse-Mobile/www/html/movie-timeline.html
+++ /dev/null
@@ -1,806 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Movie Timeline - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/actor-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html">
-    <meta property="og:title" content="Movie Timeline - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Movie Timeline - The MovieVerse">
-    <meta name="twitter:description" content="Journey through cinema history with The MovieVerse's movie timeline feature. Discover films from any era and explore the evolution of storytelling.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #search {
-            margin-top: -1px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        #footer {
-            margin-top: 700px
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-            #footer {
-                margin-top: 20px;
-            }
-        }
-    </style>
-
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .load-more-container {
-            width: 100%;
-            text-align: center;
-            margin-top: 20px;
-        }
-        .load-more-container button {
-            margin: 10px auto;
-            background-color: #7378c5;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font: inherit;
-            display: block;
-            transition: background-color 0.3s ease;
-        }
-        .load-more-container button:hover {
-            background-color: #ff8623;
-        }
-        #ad-container2 {
-            display: none;
-        }
-        @media (max-width: 768px) {
-            #ad-container2 {
-                display: block;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -20px; margin-top: -5px" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-
-    <div class="timeline-container" style="margin-bottom: 300px">
-        <div class="center-container">
-            <div style="font-weight: bold; font-size: 27px" id="select-text">Select a Period</div>
-            <div class="year-input-container">
-                <input type="number" id="start-year" class="year-input" title="Enter any year from 1900 until now" placeholder="Start Year" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
-                <input type="number" id="end-year" class="year-input" placeholder="End Year" title="Enter any year from 1900 until now" min="1900" max="${new Date().getFullYear()}" style="font: inherit; margin-bottom: 20px">
-                <button id="load-movies" onclick="updateMovies()" title="Get Movies in the Chosen Period!">Get Movies in This Period</button>
-            </div>
-            <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
-        </div>
-        <div class="center-container1" id="center-container1">
-            <main id="results" style="scroll-behavior: smooth">
-                <!-- Movies will be dynamically loaded here -->
-            </main>
-        </div>
-    </div>
-
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 255px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 220px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 185px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 150px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 115px; z-index: 10012; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 10012">Back To Top</button>
-
-    <script src="../js/movie-timeline.js"></script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" id="back-top">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('back-top').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-    </script>
-
-    <footer id="footer">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-</body>
-
-</html>
diff --git a/MovieVerse-Mobile/www/html/movies-list.hbs b/MovieVerse-Mobile/www/html/movies-list.hbs
deleted file mode 100644
index 8bdfc1c8..00000000
--- a/MovieVerse-Mobile/www/html/movies-list.hbs
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Movies List</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-    }
-    .movie {
-      margin-bottom: 20px;
-    }
-    .movie-title {
-      font-weight: bold;
-    }
-    .movie-year {
-      font-style: italic;
-    }
-    .movie-description {
-      margin-top: 5px;
-    }
-  </style>
-</head>
-<body>
-  <h1>Movies List</h1>
-  {{#each movies}}
-    <div class="movie">
-      <div class="movie-title">{{this.title}}</div>
-      <div class="movie-year">Released in: {{this.year}}</div>
-      <div class="movie-description">{{this.description}}</div>
-    </div>
-  {{/each}}
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/notifications.html b/MovieVerse-Mobile/www/html/notifications.html
deleted file mode 100644
index 5aeeaee8..00000000
--- a/MovieVerse-Mobile/www/html/notifications.html
+++ /dev/null
@@ -1,1329 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Notifications - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Notifications - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations.">
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html" />
-    <meta property="og:site_name" content="Notifications - The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/notifications.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Notifications - The MovieVerse">
-    <meta name="twitter:description" content="View your MovieVerse notifications here. Stay updated with the latest news, updates, and recommendations." />
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0 !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        main {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 20px;
-            padding: 20px;
-        }
-        section {
-            flex: 1 1 calc(33% - 40px);
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 100%;
-        }
-        @media (max-width: 1200px) {
-            section {
-                flex: 1 1 calc(50% - 40px);
-            }
-        }
-        @media (max-width: 768px) {
-            main {
-                flex-direction: column;
-            }
-            section {
-                flex-basis: 100%;
-            }
-        }
-        ul {
-            width: 100%;
-            padding: 0;
-            margin: 0;
-            list-style-type: none;
-        }
-        li {
-            width: 100%;
-            margin-top: 10px;
-            padding: 10px;
-            background-color: #ecf0f1;
-            border-left: 5px solid #2980b9;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        h2 {
-            margin-bottom: 10px;
-        }
-        li:hover {
-            background-color: #e1e3e4;
-            cursor: pointer;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #movie-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #actor-link {
-            color: black;
-        }
-        #director-link {
-            color: black;
-        }
-        #actor-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #director-link:hover {
-            cursor: pointer;
-            text-decoration: underline !important;
-            color: #ff8623 !important;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: 0 !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li style="background: none; border: none; box-shadow: none"><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#newFeatures">New Features</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#newReleases">New Releases</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#tipsTricks">Tips & Tricks</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#popularActors">Popular Actors</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="#popularDirectors">Popular Directors</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="sign-in.html">Sign In</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="user-profile.html">Profile</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="feedback.html">Submit Feedback</a></li>
-            <li style="background: none; border: none; box-shadow: none"><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main>
-        <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
-            <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
-            <ul>
-                <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comment-dots"></i> <strong>Improved Chatbot:</strong> Get personalized movie recommendations and insightful answers to your questions with our smarter chatbot.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Chat Feature:</strong> Join the conversation! Chat with fellow film fans in real-time to share your passion and discover new favorites.</li>
-                <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>Improved Recommendations:</strong>  Unlock a world of movies tailored just for you. Our enhanced engine suggests films based on your unique tastes and viewing habits.</li>
-                <li><i style="margin-right: 3px" class="fas fa-users"></i> <strong>User Profile Search:</strong>  Connect with your friends and discover their movie tastes. Search for user profiles and see what they're watching.</li>
-                <li><i style="margin-right: 3px" class="fas fa-user-plus"></i> <strong>Follow Other Users:</strong> Never miss a beat! Follow your friends to stay up-to-date on their latest movie discoveries and recommendations.</li>
-                <li><i style="margin-right: 3px" class="fas fa-share-alt"></i> <strong>Share Watch Lists:</strong> Spread the cinematic love! Create and share custom watch lists with friends and family, showcasing your curated collection of must-see films.</li>
-            </ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
-            <h3>Since Your Last Visit</h3>
-            <ul id="releasesSinceLastVisit"></ul>
-            <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
-            <ul id="releasesThisMonth"></ul>
-            <h3 style="margin-top: 35px">Since the Beginning of This Year</h3>
-            <ul id="releasesThisYear"></ul>
-            <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
-            <p style="color: black; margin-top: 0"> You can always view more recommended movies in your recommended list in <a id="githubLink1" href="../../index.html#recommendedDIV">your recommended movies section</a>.</p>
-            <ul id="recommendedReleases"></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
-            <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
-            <ul>
-                <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
-                <li><i style="margin-right: 3px" class="fas fa-comments"></i> <strong>Engaging with the Community:</strong> Dive into vibrant discussions, share your insights, and connect with other film enthusiasts.</li>
-                <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Exploring Indie Films:</strong>  Unearth hidden cinematic treasures and broaden your horizons with our curated selection of independent films.</li>
-                <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>Rating Movies:</strong> Your voice matters! Share your opinions by rating movies and TV shows, helping us refine our recommendations for you and others.</li>
-                <li><i style="margin-right: 3px" class="fas fa-robot"></i> <strong>Chatting with the Chatbot:</strong> Need a movie suggestion or want to test your film trivia knowledge? Our friendly chatbot is always ready to entertain and inform.</li>
-                <li><i style="margin-right: 3px" class="fas fa-cloud"></i> <strong>Cloud Syncing:</strong> Your movie preferences follow you wherever you go. Enjoy seamless access to your watchlists and favorites across all your devices.</li>
-            </ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
-            <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
-            <ul></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-        <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
-            <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
-            <ul></ul>
-            <p style="color: black; margin-top: 35px">
-                <em>Updated as of: <time class="updateDate" datetime=""></time></em>
-            </p>
-        </section>
-    </main>
-    <script src="../js/notifications.js"></script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('newReleases').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('popularActors').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const updateDateElements = document.querySelectorAll('.updateDate');
-            const today = new Date();
-            const options = { year: 'numeric', month: 'long', day: 'numeric' };
-            const formattedDate = today.toLocaleDateString('en-US', options);
-            const formattedDateISO = today.toISOString().split('T')[0];
-
-            updateDateElements.forEach(element => {
-                element.textContent = formattedDate;
-                element.setAttribute('datetime', formattedDateISO);
-            });
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script>
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        let today = new Date();
-        today.setFullYear(today.getFullYear() - 18);
-        let year = today.getFullYear();
-        let month = (today.getMonth() + 1).toString().padStart(2, '0');
-        let day = today.getDate().toString().padStart(2, '0');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-
-    <footer style="margin-top: 20px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/offline.html b/MovieVerse-Mobile/www/html/offline.html
deleted file mode 100644
index 3ab9890e..00000000
--- a/MovieVerse-Mobile/www/html/offline.html
+++ /dev/null
@@ -1,798 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>You're Offline - The MovieVerse</title>
-    <meta name="description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/offline.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:title" content="You're Offline - The MovieVerse">
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/offline.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="You're Offline - The MovieVerse">
-    <meta name="twitter:description" content="You're currently offline. Check your internet connection or try again later to continue exploring The MovieVerse.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body class="movie-details-body">
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="center-text" style="padding: 150px;">
-        <div style="font-size: 50px; font-weight: bold; color: #ff8623; margin-top: 20px">You're Offline</div>
-        <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
-        <button class="center-button" onclick="window.location.href='../../index.html'">Try Again</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <footer style="margin-top: 500px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/privacy-policy.html b/MovieVerse-Mobile/www/html/privacy-policy.html
deleted file mode 100644
index f40bf2dc..00000000
--- a/MovieVerse-Mobile/www/html/privacy-policy.html
+++ /dev/null
@@ -1,395 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Privacy Policy - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta property="og:title" content="Privacy Policy - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Privacy Policy - The MovieVerse">
-    <meta name="twitter:description" content="Read The MovieVerse's Privacy Policy to understand how we collect, use, and protect your data while you explore your favorite movies, directors, and actors.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <meta name="theme-color" content="#7378c5">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body, html {
-            margin: 0;
-            padding: 0;
-            overflow-x: hidden;
-        }
-        .content-area {
-            margin: 0 auto;
-            max-width: 800px;
-            padding: 0;
-            text-align: center;
-        }
-        #linkWeb {
-            color: white;
-        }
-        #linkWeb:hover {
-            color: #ff8623;
-            text-decoration: underline;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-                margin-top: 10px;
-            }
-        }
-        @media (min-width: 900px) {
-            header {
-                margin-top: 4px !important;
-            }
-        }
-        header {
-            margin-top: -5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        h2 {
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-            #form1 {
-                margin-top: 5px !important;
-            }
-        }
-        #form1 {
-            margin-top: 20px;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -20px; margin-top: -5px !important;" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='https://movie-verse.com'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#introduction">Introduction</a></li>
-            <li><a href="#consent">Consent</a></li>
-            <li><a href="#subheading2">Information We Collect</a></li>
-            <li><a href="#subheading">How We Use Your Information</a></li>
-            <li><a href="#subheading3">Log Files</a></li>
-            <li><a href="#subheading4">Cookies and Web Beacons</a></li>
-            <li><a href="terms-of-service.html">Terms of Service</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main class="content-area" style="text-align: center">
-        <div style="text-align: center; width: 90%; margin-top: 25px">
-            <div style="font-weight: bold; font-size: 30px" id="privacy-header">Privacy Policy</div>
-        </div>
-        <div id="introduction" style="text-align: center; width: 90%">
-            <h2 style="cursor: pointer">Introduction</h2>
-            <p>At The MovieVerse, accessible from <a id="linkWeb" href="https://movie-verse.com">https://movie-verse.com</a>, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by The MovieVerse and how we use it.</p>
-        </div>
-        <div id="consent" style="text-align: center; width: 90%">
-            <h2 style="cursor: pointer">Consent</h2>
-            <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms. For our Terms and Conditions, please visit the <a id="linkWeb" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">Terms and Conditions</a> page.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading2">
-            <h2 style="cursor: pointer">Information we collect</h2>
-            <p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
-            <p>If you contact us directly, we may receive additional information about you such as your name, email address, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
-        </div>
-        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading">
-            <h2 style="cursor: pointer">How we use your information</h2>
-            <p>We use the information we collect in various ways, including to:</p>
-            <ul style="color: white; list-style: none; width: 90%">
-                <li>1. Provide, operate, and maintain our website</li>
-                <li>2. Improve, personalize, and expand our website</li>
-                <li>3. Understand and analyze how you use our website</li>
-                <li>4. Develop new products, services, features, and functionality</li>
-                <li>5. Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
-                <li>6. Send you emails</li>
-                <li>7. Find and prevent fraud</li>
-                <li>8. Log Files</li>
-            </ul>
-        </div>
-        <div style="text-align: center; width: 90%; cursor: pointer" id="subheading3">
-            <h2 style="cursor: pointer">Log Files</h2>
-            <p>The MovieVerse follows a standard procedure of using log files.</p>
-            <p>These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics.</p>
-            <p>These are not linked to any information that is personally identifiable.</p>
-            <p>The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
-        </div>
-        <div style="text-align: center; margin-bottom: 300px; width: 90%; cursor: pointer" id="subheading4">
-            <h2 style="cursor: pointer">Cookies and Web Beacons</h2>
-            <p>Like any other website, The MovieVerse uses 'cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited.</p>
-            <p>The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
-            <p>We may analyze user behavior through the use of cookies and web beacons with Google Analytics. Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. We partner with Google to use the data collected to track and monitor the use of our website.</p>
-            <p>For more general information on cookies, please read <a id="linkWeb" href="https://www.cookieconsent.com/what-are-cookies/">"What Are Cookies"</a>.</p>
-        </div>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script src="../js/privacy-policy.js"></script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/profile.ejs b/MovieVerse-Mobile/www/html/profile.ejs
deleted file mode 100644
index 9fd52920..00000000
--- a/MovieVerse-Mobile/www/html/profile.ejs
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>User Profile</title>
-    <link rel="stylesheet" href="../css/style.css">
-</head>
-<body>
-<header>
-    <nav>
-        <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="/profile">Profile</a></li>
-        </ul>
-    </nav>
-</header>
-<main>
-    <section class="profile-container">
-        <h1>User Profile</h1>
-        <% if (user) { %>
-            <div class="profile-info">
-                <img src="<%= user.avatar %>" alt="Profile Avatar" class="profile-avatar">
-                <h2><%= user.name %></h2>
-                <p>Email: <%= user.email %></p>
-                <p>Location: <%= user.location %></p>
-                <p>Member since: <%= user.createdAt %></p>
-                <p>Favorite Movies:</p>
-                <ul>
-                    <% user.favoriteMovies.forEach(movie => { %>
-                        <li><%= movie.title %></li>
-                    <% }) %>
-                </ul>
-                <p>Favorite Genres:</p>
-                <ul>
-                    <% user.favoriteGenres.forEach(genre => { %>
-                        <li><%= genre %></li>
-                    <% }) %>
-                </ul>
-                <p>Favorite Actors:</p>
-                <ul>
-                    <% user.favoriteActors.forEach(actor => { %>
-                        <li><%= actor.name %></li>
-                    <% }) %>
-                </ul>
-                <p>
-                    <a href="/profile/edit">Edit Profile</a>
-                </p>
-            </div>
-        <% } else { %>
-            <p>User not found.</p>
-        <% } %>
-    </section>
-</main>
-<footer>
-    <p>&copy; 2024 The MovieVerse. All rights reserved.</p>
-</footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/reset-password.html b/MovieVerse-Mobile/www/html/reset-password.html
deleted file mode 100644
index 3727e104..00000000
--- a/MovieVerse-Mobile/www/html/reset-password.html
+++ /dev/null
@@ -1,1097 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Reset Password - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html">
-    <meta property="og:title" content="Reset Password - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Reset Password - The MovieVerse">
-    <meta name="twitter:description" content="Reset your MovieVerse password to regain access and continue enjoying movies. Follow secure steps to update your password.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-
-        .password-reset-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-
-        .password-reset-form-container input[type="email"],
-        .password-reset-form-container input[type="password"],
-        .password-reset-form-container input[type="text"],
-        .password-reset-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-
-        #local-time {
-            transform: translateX(12%);
-        }
-
-        .password-reset-form-container button[type="submit"],
-        .password-reset-form-container button[type="button"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .password-reset-form-container button:hover {
-            background-color: #22254b;
-            color: white;
-        }
-
-        .password-reset-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        .password-reset-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-
-        .skiptranslate {
-            color: white !important;
-        }
-
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-
-        #my-heading {
-            margin-top: 24px !important;
-        }
-
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-
-    <div class="password-reset-form-container" id="password-reset-form-container" style="margin-bottom: 300px">
-        <form id="resetPasswordForm">
-            <h2>Reset Password</h2>
-            <p style="color: black">Forgot your password? No worries! Enter your email to verify your account and reset your password.</p>
-            <input type="email" id="resetEmail" placeholder="Enter your email" required>
-            <button type="submit">Verify Account</button>
-            <button type="button" id="back-to-sign-in" onclick="window.location.href='sign-in.html'">Back to Sign In</button>
-        </form>
-        <div id="newPasswordFields" style="display: none;">
-            <p style="color: black">Great news! Your account has been verified. Now, enter and confirm your new password below.</p>
-            <input type="password" id="newPassword" placeholder="New Password" required>
-            <input type="password" id="confirmNewPassword" placeholder="Confirm New Password" required>
-            <div style="margin-top: 10px; margin-bottom: 10px">
-                <label>
-                    <input type="checkbox" id="togglePassword"> Show Password
-                </label>
-            </div>
-            <button type="button" id="updatePasswordButton">Update Password</button>
-        </div>
-    </div>
-
-    <footer style="margin-top: 750px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <script src="../js/reset-password.js" type="module"></script>
-
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('newPassword');
-            const confirmPasswordInput = document.getElementById('confirmNewPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-                confirmPasswordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-                confirmPasswordInput.type = 'password';
-            }
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-    </script>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/html/search.html b/MovieVerse-Mobile/www/html/search.html
deleted file mode 100644
index 683f51f8..00000000
--- a/MovieVerse-Mobile/www/html/search.html
+++ /dev/null
@@ -1,921 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" style="overflow-x: hidden">
-<head>
-    <meta charset="UTF-8">
-    <title>Search Results - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:title" content="Search Results - The MovieVerse">
-    <meta property="og:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/search.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/search.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Search Results - The MovieVerse">
-    <meta name="twitter:description" content="Find movies, TV series, and actors with The MovieVerse. Explore detailed results to discover your next favorite film or show.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <script src="../js/search.js"></script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #local-time {
-            margin-left: 5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #ad-container {
-            display: block !important;
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -50px; margin-top: -5px" id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px" class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <main id="movie-match-main" style="margin-top: 10px; margin-bottom: 150px">
-        <h2 id="search-results-label">Search Results</h2>
-        <div class="category-buttons">
-            <button data-category="movie" onclick="showResults('movie')">Movies</button>
-            <button data-category="tv" onclick="showResults('tv')">TV Series</button>
-            <button data-category="person" onclick="showResults('person')">People</button>
-        </div>
-        <button id="toggle-filters-btn">Filter & Sort Results</button>
-        <!-- Filters for Movies -->
-        <div id="movie-tv-filters" style="display: none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="genre-filter">Genre:</label>
-            <select id="genre-filter">
-                <option value="">Select Genre</option>
-                <!-- Populated with genres -->
-            </select>
-            <label for="language-filter">Language:</label>
-            <select id="language-filter">
-                <option value="">Select Language</option>
-            </select>
-            <label for="year-filter">Year:</label>
-            <input type="number" id="year-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
-            <label style="vertical-align: center" for="rating-filter">Rating:</label>
-            <input type="range" id="rating-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
-            <span id="rating-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-movie"><strong>Sort by:</strong></label>
-            <select id="sort-movie" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
-                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
-                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
-            </select>
-        </div>
-        <!-- Filters for TV Series -->
-        <div id="tv-filters" style="display: none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="genre-tv-filter">Genre:</label>
-            <select id="genre-tv-filter">
-                <option value="">Select Genre</option>
-                <!-- Populated with genres -->
-            </select>
-            <label for="language-tv-filter">Language:</label>
-            <select id="language-tv-filter">
-                <option value="">Select Language</option>
-            </select>
-            <label for="year-tv-filter">Year:</label>
-            <input type="number" id="year-tv-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
-            <label style="vertical-align: center" for="rating-tv-filter">Rating:</label>
-            <input type="range" id="rating-tv-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
-            <span id="rating-tv-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-tv"><strong>Sort by:</strong></label>
-            <select id="sort-tv" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
-                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
-                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
-            </select>
-        </div>
-        <!-- Filters for People -->
-        <div id="people-filters" style="display:none;">
-            <p style="font-weight: bold">Filters Search Results</p>
-            <label for="profession-filter">Profession:</label>
-            <select id="profession-filter">
-                <option value="">Select Profession</option>
-                <option value="Acting">Acting</option>
-                <option value="Directing">Directing</option>
-            </select>
-            <label for="gender-filter">Gender:</label>
-            <select id="gender-filter">
-                <option value="">Select Gender</option>
-                <option value="2">Male</option>
-                <option value="1">Female</option>
-            </select>
-            <label for="popularity-filter">Popularity Score:</label>
-            <input type="range" id="popularity-filter" min="0" max="100" step="1" value="5" title="Popularity" />
-            <span id="popularity-value" style="color: white; font: inherit"></span>
-            <button id="reset-filters">Reset Filters</button>
-            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
-            <label for="sort-people"><strong>Sort by:</strong></label>
-            <select id="sort-people" style="max-width: 300px">
-                <option value="">Default</option>
-                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
-                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
-            </select>
-        </div>
-        <div id="movie-match-container1" class="movie-match-container1">
-            <main id="results"></main>
-        </div>
-    </main>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 335px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 300px; right: 10px; z-index: 10012">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 265px; right: 10px; z-index: 10012">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 230px; right: 10px; z-index: 10012">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 195px; right: 10px; z-index: 10012">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 160px; right: 10px; z-index: 10012" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 125px; right: 10px; z-index: 10012" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 90px; right: 10px; z-index: 10012" title="Back to top">Back to Top</button>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 10012" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w300${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-                'back-to-top-btn'
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                    'back-to-top-btn'
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/settings.html b/MovieVerse-Mobile/www/html/settings.html
deleted file mode 100644
index 3780f1f0..00000000
--- a/MovieVerse-Mobile/www/html/settings.html
+++ /dev/null
@@ -1,1231 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>App Settings - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <meta name="description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/settings.html">
-    <meta property="og:title" content="App Settings - The MovieVerse">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/settings.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.webp"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="App Settings - The MovieVerse">
-    <meta name="twitter:description" content="Customize your MovieVerse experience. Adjust settings such as app background, text color, and font size to match your preferences.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.webp"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .settings-container {
-            text-align: center;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .settings-section {
-            margin-bottom: 30px;
-            width: 80%;
-            max-width: 500px;
-        }
-        .settings-section select,
-        .settings-section input[type="color"] {
-            width: 100%;
-            padding: 10px;
-            border-radius: 5px;
-            border: 2px solid #7378c5;
-            background-color: #22254b;
-            color: white;
-            font-size: 16px;
-            margin-top: 10px;
-        }
-        .settings-section h2 {
-            color: #ff8623;
-            margin-bottom: 10px;
-        }
-        .settings-section label {
-            font-size: 20px;
-            color: #ff8623;
-            display: block;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #reset-button {
-            display: block;
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            font-size: 1rem;
-            border-radius: 8px;
-            cursor: pointer;
-            margin: 20px auto;
-        }
-        #reset-button:hover {
-            background-color: #7378c5;
-            transition: background-color 0.3s ease;
-        }
-        #search-results-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
-            margin-left: 25px;
-        }
-        #search-title {
-            margin: 0;
-        }
-        .button-group button {
-            background-color: #ff8623;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            font-size: 1rem;
-            border-radius: 8px;
-            cursor: pointer;
-            margin-right: 10px;
-        }
-        .button-group button:hover {
-            background-color: #7378c5;
-            transition: background-color 0.3s ease;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            #heading {
-                margin-top: -5px;
-            }
-            #my-heading {
-                margin-top: 25px !important;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .image-container {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            margin-bottom: 10px;
-            border-radius: 5px;
-            background-color: #7378c5;
-            text-align: center;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            cursor: pointer;
-        }
-        .image-container:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        .image-container img {
-            margin-left: 10px;
-            cursor: pointer;
-            border-radius: 5px;
-            transition: transform 0.2s;
-        }
-        .image-container img:hover {
-            transform: scale(1.1);
-        }
-        .image-container input[type="checkbox"] {
-            margin-right: 10px;
-        }
-        .image-name {
-            margin-left: 10px;
-            font-size: 1rem;
-            color: #fff;
-        }
-        #delete-selected-images-btn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-            display: inline-block;
-            font: inherit;
-            margin: 20px auto;
-        }
-        #delete-selected-images-btn:hover {
-            background-color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="heading">
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 5px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" onclick="window.location.href='settings.html'" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <main id="settings-container" class="settings-container" style="margin-bottom: 50px">
-        <!-- Background Setting -->
-        <div class="settings-section">
-            <h2>Change App Background</h2>
-            <select id="background-select" style="font: inherit">
-                <option style="font: inherit" value="../../images/universe-1.webp">Default</option>
-                <option style="font: inherit" value="../../images/universe-2.webp">Universe 1</option>
-                <option style="font: inherit" value="../../images/universe-22.webp">Universe 2</option>
-                <option style="font: inherit" value="../../images/universe-3.webp">Universe 3</option>
-                <option style="font: inherit" value="../../images/universe-4.webp">Universe 4</option>
-                <option style="font: inherit" value="../../images/universe-5.webp">Universe 5</option>
-                <option style="font: inherit" value="../../images/universe-6.webp">Universe 6</option>
-                <option style="font: inherit" value="../../images/universe-7.webp">Universe 7</option>
-                <option style="font: inherit" value="../../images/universe-8.webp">Universe 8</option>
-                <option style="font: inherit" value="../../images/universe-9.webp">Universe 9</option>
-                <option style="font: inherit" value="../../images/universe-10.webp">Universe 10</option>
-                <option style="font: inherit" value="../../images/universe-11.webp">Universe 11</option>
-                <option style="font: inherit" value="../../images/universe-12.webp">Universe 12</option>
-                <option style="font: inherit" value="../../images/universe-13.webp">Universe 13</option>
-                <option style="font: inherit" value="../../images/universe-14.webp">Universe 14</option>
-                <option style="font: inherit" value="../../images/universe-15.webp">Universe 15</option>
-                <option style="font: inherit" value="../../images/universe-16.webp">Universe 16</option>
-                <option style="font: inherit" value="../../images/universe-17.webp">Universe 17</option>
-                <option style="font: inherit" value="../../images/universe-18.webp">Universe 18</option>
-                <option style="font: inherit" value="../../images/universe-19.webp">Universe 19</option>
-                <option style="font: inherit" value="../../images/universe-20.webp">Universe 20</option>
-                <option style="font: inherit" value="../../images/universe-21.webp">Universe 21</option>
-                <option style="font: inherit" value="../../images/universe.webp">Universe 22</option>
-                <option style="font: inherit" value="../../images/universe-23.webp">Universe 23</option>
-                <option style="font: inherit" value="../../images/black.webp">Black</option>
-                <option style="font: inherit" value="../../images/grey.webp">Grey</option>
-                <option style="font: inherit" value="../../images/blue.webp">Blue</option>
-                <option style="font: inherit" value="../../images/silver.webp">Silver</option>
-                <option style="font: inherit" value="../../images/gold.webp">Gold</option>
-                <option style="font: inherit" value="../../images/rose.webp">Rose</option>
-                <option style="font: inherit" value="../../images/pink.webp">Pink</option>
-                <option style="font: inherit" value="../../images/red.webp">Red</option>
-                <option style="font: inherit" value="../../images/green.webp">Green</option>
-                <option style="font: inherit" value="../../images/brown.webp">Brown</option>
-                <option style="font: inherit" value="../../images/purple.webp">Purple</option>
-                <option style="font: inherit" value="../../images/orange.webp">Orange</option>
-                <option style="font: inherit" value="../../images/yellow.webp">Light Yellow</option>
-            </select>
-        </div>
-        <div class="settings-section">
-            <h2>Upload A Custom Background</h2>
-            <input type="file" id="custom-bg-upload" accept="image/*" style="margin-bottom: 10px; padding-left: 10px; font: inherit">
-            <input type="text" id="custom-bg-name" placeholder="Enter image name..." style="margin-bottom: 10px; font: inherit">
-            <div class="button-group">
-                <button id="upload-bg-btn" style="font: inherit">Upload</button>
-                <button id="delete-uploaded-btn" style="font: inherit">Delete Uploaded Images</button>
-            </div>
-        </div>
-        <div class="settings-section" id="delete-images-section" style="display: none;">
-            <h2>Select Images to Delete</h2>
-            <div id="custom-images-container"></div>
-            <button id="delete-selected-images-btn">Delete Selected Images</button>
-        </div>
-        <!-- Text Color Setting -->
-        <div class="settings-section">
-            <h2>Change Text Color</h2>
-            <label for="text-color-input">Text Color:</label>
-            <input type="color" style="min-height: 50px" id="text-color-input">
-        </div>
-        <!-- Font Size Setting -->
-        <div class="settings-section">
-            <h2>Change Font Size</h2>
-            <label style="font: inherit" for="font-size-select">Font Size:</label>
-            <select style="font: inherit" id="font-size-select">
-                <option style="font: inherit" value="small">Small</option>
-                <option style="font: inherit" value="medium" selected>Medium</option>
-                <option style="font: inherit" value="large">Large</option>
-            </select>
-        </div>
-        <button style="font: inherit" id="reset-button">Reset to Defaults</button>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 200px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/settings.js"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, span, div, button, input, select, textarea').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/sign-in.html b/MovieVerse-Mobile/www/html/sign-in.html
deleted file mode 100644
index 40df0ef7..00000000
--- a/MovieVerse-Mobile/www/html/sign-in.html
+++ /dev/null
@@ -1,1077 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Sign In - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="Sign In - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Sign In - The MovieVerse">
-    <meta name="twitter:description" content="Sign in to The MovieVerse to save your preferences, create watchlists, rate movies, and access personalized movie recommendations.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-        #local-time {
-            transform: translateX(12%);
-        }
-        .sign-in-form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.75);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .sign-in-form-container h1 {
-            color: black;
-        }
-        .sign-in-form-container p {
-            color: black;
-        }
-        .sign-in-form-container input[type="email"],
-        .sign-in-form-container input[type="password"],
-        .sign-in-form-container input[type="text"],
-        .sign-in-form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .sign-in-form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .sign-in-form-container button[type="button"] {
-            background-color: #f0f0f0;
-            color: #333;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #createAccountBtn:hover {
-            background-color: #d3d3d3;
-            color: #1B1B1B;
-        }
-        .sign-in-form-container button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .sign-in-form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .sign-in-form-container h2 {
-            color: black;
-            margin-bottom: 20px;
-        }
-        header {
-            margin-top: -5px;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header">
-        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1" style="margin-top: 21px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="sign-in-form-container" style="margin-bottom: 390px">
-        <form id="signInForm">
-            <h2>Sign In</h2>
-            <p>Sign in to save your stats, watchlists, get personalized movie recommendation, join our community, and more!</p>
-            <input type="email" id="signInEmail" placeholder="Email" required>
-            <input type="password" id="signInPassword" placeholder="Password" required>
-            <label style="margin-top: 10px; margin-bottom: 10px">
-                <input type="checkbox" id="togglePassword"> Show Password
-            </label>
-            <button type="submit">Sign In</button>
-            <button type="button" id="createAccountBtn">Create an Account</button>
-            <p>Forgot password? Click <a style="text-decoration: underline" id="githubLink1" href="reset-password.html">below</a> to reset it.</p>
-            <button type="button" id="resetPasswordBtn" onclick="window.location.href='reset-password.html'">Reset Password</button>
-        </form>
-    </div>
-    <script>
-        document.getElementById('togglePassword').addEventListener('change', function() {
-            const passwordInput = document.getElementById('signInPassword');
-
-            if (this.checked) {
-                passwordInput.type = 'text';
-            }
-            else {
-                passwordInput.type = 'password';
-            }
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/sign-in.js" type="module"></script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode1 = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode1.part1) + atob(movieCode1.part2) + atob(movieCode1.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-    </script>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/support.html b/MovieVerse-Mobile/www/html/support.html
deleted file mode 100644
index a02e4a31..00000000
--- a/MovieVerse-Mobile/www/html/support.html
+++ /dev/null
@@ -1,1101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Support - The MovieVerse</title>
-    <meta name="description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/support.html">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/support.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta property="og:title" content="Support - The MovieVerse">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Support - The MovieVerse">
-    <meta name="twitter:description" content="Get 24/7 help from MovieVerse support for account issues, technical help, or service inquiries. We're here to enhance your cinema experience.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        .form-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .form-container h1 {
-            color: #ff8623;
-        }
-        .form-container input,
-        .form-container textarea,
-        .form-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .form-container button[type="submit"] {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .form-container button[type="submit"]:hover {
-            background-color: #ff8623;
-        }
-        .form-container form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        #supportBtn {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-            margin-top: 20px;
-        }
-        #supportBtn:hover {
-            background-color: #ff8623;
-        }
-        .center-text {
-            text-align: center;
-        }
-        .center-button {
-            display: block;
-            margin: 20px auto;
-            padding: 5px 10px;
-            cursor: pointer;
-            border: none;
-            background-color: #7378c5;
-            font: inherit;
-            color: #000000;
-            margin-top: 40px;
-            border-radius: 8px;
-        }
-        .center-button:hover {
-            background-color: #ff8623;
-            transition: background-color 0.3s;
-        }
-        #link {
-            color: white;
-        }
-        #link:hover {
-            color: #ff8623;
-        }
-        @media (min-width: 900px) {
-            #my-heading {
-                margin-top: 15px !important;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-    </style>
-</head>
-<body class="movie-details-body">
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header>
-        <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div class="form-container">
-        <div style="font-weight: bold; font-size: 28px; margin-top: 10px">Contact Support</div>
-        <p style="color: black">Have a question or need help? Contact us and we'll take a look at your request as soon as possible.</p>
-        <form action="https://formspree.io/f/xdoqzzao" method="POST">
-            <input type="text" id="name" name="name" placeholder="Your Name" required>
-            <input type="email" id="email" name="_replyto" placeholder="Your Email" required>
-            <textarea id="message" name="message" placeholder="Your Message" required></textarea>
-            <button type="submit">Send Message</button>
-            <p style="color: black">Have a feedback for us? Or any suggestions to improve our app? Click the button below to be redirected to the feedback page.</p>
-        </form>
-        <button id="supportBtn" onclick="window.location.href='feedback.html'" title="Submit a feedback">Submit Feedback</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-    </script>
-
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
-        }
-
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-    </script>
-
-    <footer style="margin-top: 400px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/terms-of-service.html b/MovieVerse-Mobile/www/html/terms-of-service.html
deleted file mode 100644
index 23daac13..00000000
--- a/MovieVerse-Mobile/www/html/terms-of-service.html
+++ /dev/null
@@ -1,399 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>Terms of Service - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="manifest" href="../../manifest.json">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta property="og:title" content="Terms of Service - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="Terms of Service - The MovieVerse">
-    <meta name="twitter:description" content="Read The MovieVerse's Terms of Service. Understand your rights and responsibilities as a user of The MovieVerse platform.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        body, html {
-            margin: 0;
-            padding: 0;
-            overflow-x: hidden;
-        }
-        .content-area {
-            margin: 0 auto;
-            max-width: 800px;
-            padding: 0;
-            text-align: center;
-        }
-        #mail {
-            color: white;
-        }
-        #mail:hover {
-            color: #ff8623;
-            text-decoration: underline;
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            header {
-                margin-top: -5px;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        h2 {
-            color: white;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#agreement">Agreement to Terms</a></li>
-            <li><a href="#consent">Changes to Terms</a></li>
-            <li><a href="#subheading2">Use of Service</a></li>
-            <li><a href="#subheading">Content</a></li>
-            <li><a href="#subheading3">Ads</a></li>
-            <li><a href="#subheading4">Accounts</a></li>
-            <li><a href="#subheading5">Intellectual Property</a></li>
-            <li><a href="#subheading6">Links To Other Web Sites</a></li>
-            <li><a href="#subheading7">Termination</a></li>
-            <li><a href="#subheading8">Disclaimer</a></li>
-            <li><a href="#subheading9">Governing Law</a></li>
-            <li><a href="#subheading10">Contact Us</a></li>
-            <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <main class="content-area">
-        <div style="text-align: center; width: 90%">
-            <div style="font-weight: bold; font-size: 28px; margin-top: 10px; color: #ff8623" id="tos-header">Terms of Service</div>
-        </div>
-        <div style="text-align: center; width: 90%" id="agreement">
-            <h2 style="cursor: pointer">Agreement to Terms</h2>
-            <p>By using The MovieVerse, you agree to be bound by these terms. If you disagree with any part of the terms, then you do not have permission to access the service.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="consent">
-            <h2 style="cursor: pointer">Changes to Terms</h2>
-            <p>We reserve the right to modify or replace these Terms at any time at our sole discretion. We will try to provide at least 30 days' notice prior to any new terms taking effect.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading2">
-            <h2 style="cursor: pointer">Use of Service</h2>
-            <p>The MovieVerse is provided on an "AS IS" and "AS AVAILABLE" basis. The service is for personal, non-commercial use only.</p>
-            <p>You may not use the service for any illegal or unauthorized purpose. You must not, in the use of the service, violate any laws in your jurisdiction.</p>
-            <p>You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the service, use of the service, or access to the service without express written permission by us.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading">
-            <h2 style="cursor: pointer">Content</h2>
-            <p>Content found on or through this Service are the property of The MovieVerse or used with permission. You may not distribute, modify, transmit, reuse, download, repost, copy, or use said Content, whether in whole or in part, for commercial purposes or for personal gain, without express advance written permission from us.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading3">
-            <h2 style="cursor: pointer">Ads</h2>
-            <p>During use of the Service, you may enter into correspondence with or participate in promotions of advertisers or sponsors showing their goods or services through the Service. Any such activity, and any terms, conditions, warranties or representations associated with such activity, is solely between you and the applicable third-party.</p>
-            <p>We display ads on the Service to help us keep our servers and databases running and free for everyone. We're committed to placing non-intrusive ads only, which means no pop-ups, no auto-playing videos, and no ads that interfere with your experience on the site.</p>
-            <p>If you encounter any ads that are inappropriate, misleading, or intrusive, please let us know by contacting us at using the Feedback form <a style="color: white" href="feedback.html">here</a>.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading4">
-            <h2 style="cursor: pointer">Accounts</h2>
-            <p>When you create an account with us, you guarantee that the information you provide us is accurate, complete, and current at all times. Inaccurate, incomplete, or obsolete information may result in the immediate termination of your account on the Service.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading5">
-            <h2 style="cursor: pointer">Intellectual Property</h2>
-            <p>The Service and its original content, features, and functionality are and will remain the exclusive property of The MovieVerse and its licensors.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading6">
-            <h2 style="cursor: pointer">Links To Other Web Sites</h2>
-            <p>Our Service may contain links to third-party web sites or services that are not owned or controlled by The MovieVerse. We have no control over, and assume no responsibility for the content, privacy policies, or practices of any third-party web sites or services.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading7">
-            <h2 style="cursor: pointer">Termination</h2>
-            <p>We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of the Terms.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading8">
-            <h2 style="cursor: pointer">Disclaimer</h2>
-            <p>Your use of the Service is at your sole risk. The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind.</p>
-        </div>
-        <div style="text-align: center; width: 90%" id="subheading9">
-            <h2 style="cursor: pointer">Governing Law</h2>
-            <p>These Terms shall be governed and construed in accordance with the laws of the country where The MovieVerse is based (the United States of America), without regard to its conflict of law provisions.</p>
-            <p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
-        </div>
-        <div style="text-align: center; width: 90%; margin-bottom: 300px" id="subheading10">
-            <h2 style="cursor: pointer">Contact Us</h2>
-            <p>If you have any questions about these Terms, please contact us at <a id="mail" href="mailto:info@movie-verse.com">info@movie-verse.com</a>.</p>
-        </div>
-    </main>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script src="../js/terms-of-service.js"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/trivia.html b/MovieVerse-Mobile/www/html/trivia.html
deleted file mode 100644
index d2bc5201..00000000
--- a/MovieVerse-Mobile/www/html/trivia.html
+++ /dev/null
@@ -1,1173 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>MovieVerse Trivia - Test Your Movie Knowledge</title>
-    <link rel="stylesheet" href="../css/trivia.css">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html">
-    <meta property="og:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/trivia.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="MovieVerse Trivia - Test Your Movie Knowledge">
-    <meta name="twitter:description" content="Test your movie knowledge with The MovieVerse Trivia. Challenge yourself with a variety of questions about movies, actors, and directors.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <meta name="theme-color" content="#7378c5">
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        label {
-            cursor: pointer;
-        }
-        label:hover {
-            color: #f509d9;
-        }
-        #my-heading {
-            margin-top: 25px;
-        }
-        @keyframes dropIn {
-            0% {
-                opacity: 0;
-                transform: translateY(-50px);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        #my-heading {
-            margin-bottom: -25px;
-            opacity: 0;
-            animation: dropIn 1s ease forwards;
-        }
-        #my-heading a {
-            text-decoration: none;
-            color: inherit;
-            cursor: pointer;
-            display: inline-block;
-        }
-        .highlight {
-            display: inline-block;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 0.5s;
-        }
-        #form {
-            margin-top: 16px;
-        }
-        @media (max-width: 600px) {
-            #my-heading {
-                margin-top: 10px;
-            }
-            #form {
-                margin-top: 0;
-            }
-        }
-        #ad-container1 {
-            display: block;
-        }
-        #githubLink {
-            color: white !important;
-        }
-        #githubLink:hover {
-            color: #ff8623 !important;
-            transition: 0.1s ease-in;
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        @media (min-width: 768px) {
-            #my-heading {
-                margin-top: 19px;
-            }
-            #form {
-                margin-top: 10px;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #local-time {
-            cursor: pointer;
-            opacity: 0;
-            animation: dropIn 1s ease forwards 1.5s;
-        }
-        #local-time p,
-        #local-time div {
-            opacity: 0;
-            animation: dropIn 1s ease forwards 2s;
-        }
-        #my-heading1 {
-            color: #ff8623;
-            padding: 10px;
-            font-size: 36px;
-            text-align: center;
-            background-color: transparent;
-            margin-left: 40px;
-        }
-        .highlight2 {
-            color: orange;
-        }
-        .highlight2:hover {
-            color: #ff8623;
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-bottom: -50px; margin-top: 9px">
-        <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
-            <i class="fas fa-bars"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 215px" class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
-        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight2">vieV</span>erse Menu
-            </div>
-        </a>
-        <div id="button-container">
-            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
-        </div>
-        <ul style="overflow-y: auto">
-            <li><a href="#0">Question 1</a></li>
-            <li><a href="#1">Question 2</a></li>
-            <li><a href="#2">Question 3</a></li>
-            <li><a href="#3">Question 4</a></li>
-            <li><a href="#4">Question 5</a></li>
-            <li><a href="#5">Question 6</a></li>
-            <li><a href="#6">Question 7</a></li>
-            <li><a href="#7">Question 8</a></li>
-            <li><a href="#8">Question 9</a></li>
-            <li><a href="#9">Question 10</a></li>
-            <li><a href="sign-in.html">Sign In</a></li>
-            <li><a href="user-profile.html">Profile</a></li>
-            <li><a href="analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
-        </ul>
-    </nav>
-    <div>
-        <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
-    </div>
-    <div id="result-modal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3>Trivia Results</h3>
-                <span class="close-button" title="Close the trivia results modal">&times;</span>
-            </div>
-            <div id="progress-circle" class="progress-circle">
-                <div id="correct-answers"></div>
-            </div>
-            <p id="result-text"></p>
-        </div>
-    </div>
-    <main id="main"></main>
-    <form id="quiz-form" style="margin-bottom: 50px">
-        <div id="quiz-container"></div>
-        <button type="button" id="regenerate-questions" class="button" style="color: black">Get New Questions</button>
-        <button type="submit" id="submit" class="button" style="color: black">Submit Answers</button>
-    </form>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0; color: white">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="color: white; margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <script src="../js/quiz.js" type="module"></script>
-    <script>
-        function toggleNav() {
-            const sideNav = document.getElementById('side-nav');
-            sideNav.classList.toggle('manual-toggle');
-            adjustNavBar();
-        }
-
-        function removeNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.classList.remove('manual-toggle');
-            }
-
-            adjustNavBar();
-        }
-
-        function adjustNavBar() {
-            const sideNav = document.getElementById('side-nav');
-            if (sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0px';
-            }
-            else {
-                sideNav.style.left = '-250px';
-            }
-        }
-
-        document.addEventListener('mousemove', function(event) {
-            const sideNav = document.getElementById('side-nav');
-            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '0';
-            }
-        });
-
-        document.getElementById('side-nav').addEventListener('mouseleave', function() {
-            const sideNav = document.getElementById('side-nav');
-            if (!sideNav.classList.contains('manual-toggle')) {
-                sideNav.style.left = '-250px';
-            }
-        });
-
-        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')) {
-                sideNav.classList.remove('manual-toggle');
-                adjustNavBar();
-            }
-        });
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-    </script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p id="footerP" style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-        <a href="#" class="bottom-bar-item" id="back-top">
-            <i class="fas fa-arrow-up"></i>
-            <span>Top</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-    </script>
-    <script>
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        function fallbackMovieSelection() {
-            const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
-            const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
-            localStorage.setItem('selectedMovieId', randomFallbackMovie);
-            window.location.href = 'movie-details.html';
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        const movieCode = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
-        }
-
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-
-        document.getElementById('back-top').addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
-        });
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/tv-details.html b/MovieVerse-Mobile/www/html/tv-details.html
deleted file mode 100644
index 6898fd09..00000000
--- a/MovieVerse-Mobile/www/html/tv-details.html
+++ /dev/null
@@ -1,938 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>TV Series Details - The MovieVerse</title>
-    <link rel="stylesheet" href="../css/style.css">
-    <script src="../js/tv-details.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="TV Series Details - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html" />
-    <meta property="og:site_name" content="The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/tv-details.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="TV Series Details - The MovieVerse">
-    <meta name="twitter:description" content="Discover in-depth details about your favorite TV series on The MovieVerse. Get information on cast, plot, ratings, and more.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        #rating {
-            color: white !important;
-        }
-        #rating:hover {
-            color: #ff8623 !important;
-        }
-        #favorite-btn:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        .favorited:hover {
-            background-color: #ff8623 !important;
-            transition: background-color 0.3s;
-        }
-        #comment-modal .modal-content {
-            min-width: 400px;
-            margin-top: 0;
-        }
-        #homepage {
-            color: white;
-        }
-        #homepage:hover {
-            color: #ff8623;
-        }
-        #prod-companies {
-            color: white;
-        }
-        #prod-companies:hover {
-            color: #ff8623;
-        }
-        header {
-            margin-top: 9px;
-        }
-        @media (max-width: 600px) {
-            #my-heading {
-                margin-top: 10px;
-            }
-        }
-        @media (min-width: 900px) {
-            #form1 {
-                margin-right: 0;
-            }
-            header {
-                margin-top: -5px;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        .cast-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-        }
-        .cast-member-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            margin: 5px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .cast-member-image {
-            width: 100%;
-            height: 155px;
-            object-fit: cover !important;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .cast-member-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .cast-member-details {
-            width: 100%;
-        }
-        .cast-member-name, .cast-member-role {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-            white-space: normal;
-            text-align: center;
-        }
-        .similar-tv-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
-            overflow: hidden !important;
-        }
-        .similar-tv-item {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            width: 115px;
-            overflow: hidden;
-            border-radius: 8px;
-        }
-        .similar-tv-item:hover {
-            transform: scale(1.05);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-            cursor: pointer;
-        }
-        .similar-tv-image {
-            width: 100%;
-            height: 155px;
-            object-fit: fill;
-            border-radius: 5px;
-            margin-bottom: 5px;
-        }
-        .similar-tv-name {
-            font-size: 12px;
-            margin: 0;
-            word-break: break-word;
-        }
-        .similar-tv-link {
-            text-decoration: none;
-            color: #333;
-        }
-        #movie-details-container {
-            margin-top: 20px;
-        }
-        @media (max-width: 767px) {
-            #movie-details-container {
-                margin-top: 0;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header style="margin-bottom: -60px">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <form id="form1">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-    </header>
-    <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-    <main id="main" style="margin-left: 35px; height: 0"></main>
-    <div class="details-container" id="movie-details-container" style="margin-bottom: 100px;">
-        <!-- Left side for Title and Image -->
-        <div class="movie-left">
-            <!-- Container for Title and Favorites Button -->
-            <div class="title-favorites-container">
-                <h2 id="movie-title" class="movie-header"></h2>
-                <button id="favorite-btn">
-                    ❤️
-                </button>
-            </div>
-            <img id="movie-image" alt="Loading TV Series Details..." style="width: 25vw; border-radius: 8px" title="Click to view full-size image" />
-            <h3>Your Rating:</h3>
-            <div class="rating" title="Click on a star to rate this movie!">
-                <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
-                <span class="star" data-value="2" title="Good to hear your feedback! It will be shared with movie producers to improve quality">&#9733;</span>
-                <span class="star" data-value="3" title="Average movie! Discover more movies to find better ones">&#9733;</span>
-                <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
-                <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
-            </div>
-            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
-            <div id="comments-section">
-                <h3>TV Show Comments</h3>
-                <div id="comments-container"></div>
-                <!-- Comments Buttons -->
-                <div class="comments-controls">
-                    <button id="toggle-comment-modal" title="Add a comment for this movie">Add Comment</button>
-                    <button id="prev-page" title="Previous Page" disabled> &lt; </button>
-                    <button id="next-page" title="Next Page"  disabled> &gt; </button>
-                </div>
-                <!-- Comment Modal -->
-                <div id="comment-modal" class="modal">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3>Add a Comment for This TV Series</h3>
-                            <span class="close">&times;</span>
-                        </div>
-                        <p style="font-size: 15px; margin-bottom: 20px">Your review is much appreciated!</p>
-                        <form id="comment-form">
-                            <input type="text" id="user-name" placeholder="Your nickname (Required)" required>
-                            <textarea id="user-comment" placeholder="Your comment (Required)" required></textarea>
-                            <button id="post-comment-btn" type="submit" title="Post your comment for this TV series">Post Comment</button>
-                            <p style="font-size: 14px; margin-top: 30px">
-                                <em>All comments will be posted anonymously, using the nickname you provided and not your profile name, so you can freely express your opinions!</em>
-                            </p>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right" style="position: relative; overflow: hidden">
-            <p id="movie-description" class="movie-description"></p>
-            <h2 id="movie-rating" class="movie-rating"></h2>
-        </div>
-    </div>
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-    <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script src="../js/tv-details.js"></script>
-    <script src="../js/add-to-tv-favorites.js" type="module"></script>
-    <script type="module">
-        import { toggleFavoriteTVSeries, checkAndUpdateFavoriteButtonTVSeries } from '../js/add-to-tv-favorites.js';
-        document.addEventListener('DOMContentLoaded', () => {
-            const favoriteBtn = document.getElementById('favorite-btn');
-            if (favoriteBtn) {
-                favoriteBtn.addEventListener('click', toggleFavoriteTVSeries);
-            }
-        });
-        checkAndUpdateFavoriteButtonTVSeries();
-    </script>
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        document.getElementById('movie-image').addEventListener('click', function() {
-            let imageUrl = this.src.replace('w780', 'w1280');
-            const modalHtml = `<div id="image-modal" style="z-index: 10000002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                    <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="TV Series Poster" />
-                                    <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
-                               </div>`;
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-            document.getElementById('image-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    this.remove();
-                }
-            });
-        });
-    </script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"></script>
-    <script src="../js/comments-tv.js" type="module"></script>
-    <footer>
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                } else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/html/user-profile.html b/MovieVerse-Mobile/www/html/user-profile.html
deleted file mode 100644
index 98b22596..00000000
--- a/MovieVerse-Mobile/www/html/user-profile.html
+++ /dev/null
@@ -1,1337 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-<head>
-    <meta charset="UTF-8">
-    <title>User Profile - The MovieVerse</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="User Profile - The MovieVerse">
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta http-equiv="content-language" content="en" />
-    <meta property="og:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html" />
-    <meta property="og:site_name" content="User Profile - The MovieVerse" />
-    <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
-    <meta property="og:favicon" content="./images/favicon.ico" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
-    <meta name="author" content="Son Nguyen Hoang">
-    <meta name="description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <link rel="canonical" href="https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html">
-    <meta name="robots" content="index, follow">
-    <meta name="rating" content="General">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="global">
-    <meta http-equiv="content-language" content="en">
-    <meta name="language" content="en">
-    <meta name="theme-color" content="#7378c5">
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@MovieVerse" />
-    <meta name="twitter:creator" content="@hoangsonw" />
-    <meta name="twitter:title" content="User Profile - The MovieVerse">
-    <meta name="twitter:description" content="View and edit your user profile on The MovieVerse. Manage your preferences, watchlists, ratings, and personal details.">
-    <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
-    <meta name="referrer" content="no-referrer-when-downgrade">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-    <link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
-    <link rel="stylesheet" href="../css/style.css"/>
-    <link rel="manifest" href="../../manifest.json">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-CQKJ67FXZ4');
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Light.ttf') format('truetype');
-            font-weight: 200;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-Regular.ttf') format('truetype');
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: 'Poppins';
-            src: url('https://movie-verse.com/fonts/Poppins-SemiBold.ttf') format('truetype');
-            font-weight: 600;
-            font-style: normal;
-            font-display: swap;
-        }
-        h1 {
-            color: #ff8623;
-        }
-        h1:hover {
-            color: #f509d9;
-            transition: 0.1s ease;
-        }
-        .profile-container {
-            max-width: 400px;
-            margin: 100px auto;
-            padding: 20px;
-            background-color: rgba(211, 211, 211, 0.5);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            text-align: center;
-            backdrop-filter: blur(5px);
-        }
-        .profile-container input[type="text"],
-        .profile-container input[type="date"],
-        .profile-container input[type="file"],
-        .profile-container button {
-            width: 90%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font: inherit;
-        }
-        .profile-container button {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .profile-container button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .profile-container h2, .profile-container p {
-            color: black;
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgba(0,0,0,0.4);
-            padding-top: 60px;
-        }
-        .modal-content {
-            background-color: #fefefe;
-            margin: 5% auto;
-            padding: 20px;
-            border: 1px solid #888;
-            width: 80%;
-            max-width: 400px;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(5px);
-        }
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-        .close:hover,
-        .close:focus {
-            color: #ff8623;
-            text-decoration: none;
-            cursor: pointer;
-        }
-        #editProfileModal {
-            z-index: 1000;
-            width: 100vw !important;
-        }
-        #editProfileModal .modal-content {
-            background-color: #373b69;
-            width: 400px !important;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
-        }
-        #editProfileForm input {
-            font: inherit;
-            border-radius: 8px;
-        }
-        #editProfileForm button {
-            background-color: #7378c5;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        #editProfileForm button:hover {
-            background-color: #ff8623;
-            color: white;
-        }
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .modal-header h2 {
-            margin: 0;
-            flex-grow: 1;
-        }
-        .modal-content {
-            padding-bottom: 20px;
-        }
-        .dob-container {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-        .dob-container label {
-            margin-right: 10px;
-            margin-top: 10px;
-            color: black;
-        }
-        .dob-container input[type="date"] {
-            flex-grow: 1;
-        }
-        .profile-image-container {
-            position: relative;
-            display: inline-block;
-        }
-        #removeProfileImage {
-            position: absolute;
-            top: 0;
-            background: none;
-            border: none;
-            color: red;
-            font-size: 30px;
-            font-weight: bold;
-            cursor: pointer;
-            padding: 0;
-            line-height: 1;
-            margin: 0;
-        }
-        #removeProfileImage:hover {
-            color: #ff8623;
-        }
-        #editProfileForm .modal-content h2 {
-            color: #ff8623;
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        #editProfileForm .modal-content label {
-            color: #fff;
-            margin-bottom: 10px;
-            display: block;
-        }
-        #editProfileForm .modal-content input[type="text"],
-        #editProfileForm .modal-content textarea {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            border: 1px solid #7378c5;
-            background-color: #22254b;
-            color: #fff;
-        }
-        #editProfileForm .modal-content button {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font: inherit;
-            display: block;
-            margin: 10px auto;
-            transition: background-color 0.3s ease;
-        }
-        #editProfileForm .modal-content select {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            border: 1px solid #7378c5;
-            background-color: #22254b;
-            color: #fff;
-        }
-        @media (min-width: 900px) {
-            #search {
-                margin-top: 0 !important;
-            }
-        }
-        body {
-            background-image: url("../../images/universe-1.webp");
-            background-repeat: repeat-y;
-            background-size: 100% auto;
-        }
-        @media (max-width: 767px) {
-            body {
-                background-size: auto;
-                background-position: top center;
-            }
-        }
-    </style>
-    <script src="../js/user-profile.js" type="module"></script>
-    <style>
-        #translate_control {
-            position: fixed;
-            left: 10px;
-            bottom: 10px;
-            z-index: 1000000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            border-radius: 8px;
-        }
-        @media (max-width: 767px) {
-            #translate_control {
-                display: block;
-                bottom: 70px;
-                position: fixed;
-                left: 10px;
-                z-index: 1000000;
-            }
-        }
-        .translate-trigger {
-            background-color: #7378c5;
-            color: white;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .translate-trigger:hover {
-            background-color: #ff8623;
-            transition: 0.1s ease-in;
-        }
-        #google_translate_element {
-            display: none;
-            position: fixed;
-            left: 10px;
-            bottom: 60px;
-            background-color: #7378c5;
-            border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            padding: 5px;
-            border-radius: 8px;
-            z-index: 100000000;
-            font: inherit;
-            color: white;
-        }
-        .goog-te-combo {
-            background-color: #7378c5 !important;
-            color: white !important;
-            border: 0.5px solid white !important;
-            border-radius: 8px !important;
-            font-size: 15px !important;
-            padding-left: 5px !important;
-        }
-        .skiptranslate {
-            color: white !important;
-        }
-        .goog-te-banner-frame {
-            opacity: 0.8 !important;
-            background-color: #f4f4f4 !important;
-        }
-        @media (max-width: 767px) {
-            #google_translate_element {
-                bottom: 120px;
-            }
-            #translate_control {
-                bottom: 70px;
-            }
-        }
-        #my-heading {
-            margin-top: 24px !important;
-        }
-        @media (min-width: 767px) {
-            #my-heading {
-                margin-top: -5px !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="google_translate_element"></div>
-    <div id="translate_control">
-        <div class="translate-trigger">Translate</div>
-    </div>
-
-    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <script>
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({
-                pageLanguage: 'en',
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
-                autoDisplay: false
-            }, 'google_translate_element');
-        }
-
-        document.querySelector('.translate-trigger').addEventListener('click', function() {
-            const translateEl = document.getElementById('google_translate_element');
-            translateEl.style.display = translateEl.style.display === 'block' ? 'none' : 'block';
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            let lastScrollTop = window.scrollY;
-            const translateControl = document.getElementById('translate_control');
-            const translateEl = document.getElementById('google_translate_element');
-
-            window.addEventListener('scroll', function() {
-                let scrollTop = window.scrollY;
-
-                if (window.innerWidth <= 767) {
-                    if (scrollTop > lastScrollTop && scrollTop > 0) {
-                        translateControl.style.display = 'none';
-                        translateEl.style.display = 'none';
-                    }
-                    else {
-                        translateControl.style.display = 'block';
-                    }
-                    lastScrollTop = scrollTop;
-                }
-            }, { passive: true });
-        })
-    </script>
-    <header id="homepage-header" style="margin-top: -5px">
-        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
-            <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
-                The Mo<span class="highlight" id="highlight">vieV</span>erse
-            </a>
-        </h1>
-        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
-            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
-        </div>
-        <button class="back-btn nav-btn notranslate" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
-        <button class="about nav-btn notranslate" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-        <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-        <form id="form1" style="margin-top: 20px">
-            <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </div>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>
-        <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
-        <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
-        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 195px; right: 10px">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 160px; right: 10px">Movie Timeline</button>
-        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
-    </header>
-    <div id="welcomeMessage" style="color: #ff8623; font-weight: bold; font-size: 30px; text-align: center; margin-top: 30px;"></div>
-    <div class="search-users-container" id="search-users-container">
-        <input type="text" id="searchUserInput" placeholder="Search For Any MovieVerse User..." title="Remember that this search is case-sensitive!" />
-        <button id="searchUserBtn">Search</button>
-    </div>
-    <div id="searchUserResults" class="search-results-container"></div>
-    <button id="viewMyProfileBtn" style="margin-top: 20px;">View My Profile</button>
-    <div id="profileContainer" class="profile-container">
-        <div class="profile-image-container">
-            <img id="profileImage" style="cursor: pointer" title="Click to upload a new profile image" onclick="document.getElementById('imageUpload').click()" src="../../images/user-default.png" alt="Profile Image" />
-            <button id="removeProfileImage" title="Click to remove the current profile image" style="display: none;">&times;</button>
-        </div>
-        <input type="file" id="imageUpload" accept="image/*" hidden />
-        <button id="changeProfileImageBtn" onclick="document.getElementById('imageUpload').click()">Change Profile Image</button>
-        <div class="profile-info">
-            <div id="averageDisplays" style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
-                <div class="progress-container" id="container1" style="cursor: pointer">
-                    <svg class="progress-ring" width="100" height="100">
-                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
-                        <circle class="progress-ring__progress" id="avgMovieRatingCircle" cx="50" cy="50" r="40" />
-                        <text class="progress-ring__text" id="avgMovieRatingText" x="50" y="50"></text>
-                    </svg>
-                    <p><strong>Average Movie Rating</strong></p>
-                </div>
-                <div class="progress-container" id="container2" style="cursor: pointer">
-                    <svg class="progress-ring" width="100" height="100">
-                        <circle class="progress-ring__circle" cx="50" cy="50" r="40" />
-                        <circle class="progress-ring__progress" id="avgTriviaScoreCircle" cx="50" cy="50" r="40" />
-                        <text class="progress-ring__text" id="avgTriviaScoreText" x="50" y="50"></text>
-                    </svg>
-                    <p><strong>Average Movie Trivia Score</strong></p>
-                </div>
-            </div>
-            <p id="usernameDisplay">Username: <span></span></p>
-            <p id="dobDisplay">Date of Birth: <span></span></p>
-            <p id="bioDisplay">Bio: <span></span></p>
-            <p id="favoriteGenresDisplay">Favorite Genres: <span></span></p>
-            <p id="locationDisplay">Location: <span></span></p>
-            <p id="favoriteMovieDisplay">Favorite Movie: <span></span></p>
-            <p id="hobbiesDisplay">Hobbies: <span></span></p>
-            <p id="favoriteActorDisplay"><strong>Favorite Actor:</strong> <span></span></p>
-            <p id="favoriteDirectorDisplay"><strong>Favorite Director:</strong> <span></span></p>
-            <p id="personalQuoteDisplay"><strong>Personal Quote:</strong> <span></span></p>
-            <p id="followingDisplay"><strong>Following:</strong> <span id="followingList"></span></p>
-            <p id="followersDisplay"><strong>Followers:</strong> <span id="followersList"></span></p>
-        </div>
-        <button id="editProfileBtn">Edit Profile Details</button>
-    </div>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <p id="signInPrompt" style="text-align: center; font-size: 24px; margin-top: 100px;"></p>
-    <div id="editProfileModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header" style="margin-bottom: 20px">
-                <h2>Edit Profile Details</h2>
-                <span class="close" onclick="closeModal()">&times;</span>
-            </div>
-            <form id="editProfileForm">
-                <div style="text-align: center">
-                    <label for="editUsername" style="color: white">Username:</label>
-                    <input type="text" id="editUsername" placeholder="Username">
-                </div>
-                <div style="text-align: center">
-                    <label for="editDob" style="color: white">Date of Birth:</label>
-                    <input type="date" id="editDob" style="padding-left: 5px; width: 100%" placeholder="Date of Birth" title="Click to select your date of birth"/>
-                </div>
-                <div style="text-align: center; margin-top: 20px">
-                    <label for="editBio" style="color: white">Bio:</label>
-                    <input type="text" id="editBio" placeholder="Bio">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteGenres" style="color: white">Favorite Genres:</label>
-                    <input type="text" id="editFavoriteGenres" placeholder="Favorite Genres">
-                </div>
-                <div style="text-align: center">
-                    <label for="editLocation" style="color: white">Location:</label>
-                    <input type="text" id="editLocation" placeholder="Location">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteMovie" style="color: white">Favorite Movie:</label>
-                    <input type="text" id="editFavoriteMovie" placeholder="Favorite Movie">
-                </div>
-                <div style="text-align: center">
-                    <label for="editHobbies" style="color: white">Hobbies:</label>
-                    <input type="text" id="editHobbies" placeholder="Hobbies">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteActor" style="color: white">Favorite Actor:</label>
-                    <input type="text" id="editFavoriteActor" placeholder="Favorite Actor">
-                </div>
-                <div style="text-align: center">
-                    <label for="editFavoriteDirector" style="color: white">Favorite Director:</label>
-                    <input type="text" id="editFavoriteDirector" placeholder="Favorite Director">
-                </div>
-                <div style="text-align: center">
-                    <label for="editPersonalQuote" style="color: white">Personal Quote:</label>
-                    <input type="text" id="editPersonalQuote" placeholder="Personal Quote">
-                </div>
-                <button type="button" id="saveChanges">Save Changes</button>
-                <button type="button" id="cancelEdit" onclick="closeModal()">Cancel</button>
-            </form>
-        </div>
-    </div>
-    <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
-        <p style="margin: 0;">Advertisement</p>
-        <ins class="adsbygoogle"
-             style="display: block; width: 100%;"
-             data-ad-client="ca-pub-6608388491200814"
-             data-ad-slot="4832732030"
-             data-ad-format="auto"></ins>
-        <p style="margin: 0; font-size: 12px; margin-top: 5px">Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Submit your <a style="text-decoration: underline" id="githubLink" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
-    </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <script>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
-    <div id="myModal" class="modal-overlay">
-        <div class="spinner"></div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchBar = document.getElementById('search');
-            const searchButton = document.getElementById('button-search');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-
-            function toggleVisibility() {
-                const query = searchBar.value.trim();
-                if (query) {
-                    if (window.innerWidth > 800) {
-                        myHeading.style.visibility = 'hidden';
-                        myHeading.style.opacity = '0';
-                        localTime.style.visibility = 'hidden';
-                        localTime.style.opacity = '0';
-                    }
-                }
-                else {
-                    myHeading.style.visibility = 'visible';
-                    myHeading.style.opacity = '1';
-                    localTime.style.visibility = 'visible';
-                    localTime.style.opacity = '1';
-                }
-            }
-            searchBar.addEventListener('input', toggleVisibility);
-            toggleVisibility();
-        });
-    </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            const myHeading = document.getElementById('my-heading');
-            const localTime = document.getElementById('local-time');
-            const searchButton = document.getElementById('button-search');
-
-            function toggleButtons() {
-                const query = searchInput.value.trim();
-                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-            }
-
-            clearSearchBtn.addEventListener('click', function() {
-                searchInput.value = '';
-                searchResultsContainer.innerHTML = '';
-                toggleButtons();
-                searchInput.focus();
-
-                myHeading.style.visibility = 'visible';
-                myHeading.style.opacity = '1';
-                localTime.style.visibility = 'visible';
-                localTime.style.opacity = '1';
-            });
-
-            toggleButtons();
-            searchInput.addEventListener('input', toggleButtons);
-        });
-    </script>
-    <script>
-        function showSpinner() {
-            document.getElementById('myModal').classList.add('modal-visible');
-        }
-
-        function hideSpinner() {
-            document.getElementById('myModal').classList.remove('modal-visible');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('search').addEventListener('input', function(e) {
-                showSpinner();
-                const viewAllResultsBtn = document.getElementById('view-all-results');
-                const searchInput = document.getElementById('search');
-                const query = e.target.value.trim();
-                const searchResultsContainer = document.getElementById('search-results');
-
-                viewAllResultsBtn.style.display = query ? 'block' : 'none';
-
-                function toggleButtons() {
-                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
-                    const clearSearchBtn = document.getElementById('clear-search');
-                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
-                }
-
-                if (query) {
-                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
-                    fetch(searchURL)
-                        .then(response => response.json())
-                        .then(data => {
-                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-                            displaySearchResults(sortedResults.slice(0, 5));
-                        })
-                        .catch(err => console.log("Fetching error:", err));
-                }
-                else {
-                    searchInput.value = '';
-                    searchResultsContainer.innerHTML = '';
-                    toggleButtons();
-                    searchInput.focus();
-                }
-
-                searchInput.addEventListener('input', function() {
-                    if (searchInput.value.trim()) {
-                        viewAllResultsBtn.style.display = 'block';
-                    }
-                    else {
-                        viewAllResultsBtn.style.display = 'none';
-                    }
-                });
-
-                viewAllResultsBtn.addEventListener('click', function() {
-                    const searchQuery = searchInput.value.trim();
-                    if (searchQuery) {
-                        localStorage.setItem('searchQuery', searchQuery);
-                        window.location.href = 'search.html';
-                    }
-                    else {
-                        alert('Please enter a search query.');
-                    }
-                });
-
-                hideSpinner();
-            });
-
-            function displaySearchResults(results) {
-                showSpinner();
-                const resultsContainer = document.getElementById('search-results');
-                resultsContainer.innerHTML = '';
-
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'search-result-card';
-                    card.style.cursor = 'pointer';
-
-                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
-
-                    if (imagePath) {
-                        const image = document.createElement('img');
-                        image.src = imagePath;
-                        image.className = 'result-image';
-                        card.appendChild(image);
-                    }
-                    else {
-                        const placeholder = document.createElement('div');
-                        placeholder.className = 'result-image-placeholder';
-                        placeholder.textContent = 'Image Not Available';
-                        placeholder.style.textAlign = 'center';
-                        placeholder.style.padding = '10px';
-                        card.appendChild(placeholder);
-                    }
-
-                    const details = document.createElement('div');
-                    details.className = 'result-details';
-
-                    const name = document.createElement('div');
-                    name.className = 'result-name';
-                    name.textContent = item.title || item.name;
-                    details.appendChild(name);
-
-                    const type = document.createElement('div');
-                    type.className = 'result-type';
-                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
-                    details.appendChild(type);
-
-                    card.appendChild(details);
-                    resultsContainer.appendChild(card);
-
-                    card.addEventListener('click', () => handleResultClick(item));
-                });
-
-                hideSpinner();
-            }
-
-            async function handleResultClick(item) {
-                console.log('Clicked item:', item.media_type, item.id);
-
-                if (!item.media_type) {
-                    console.log('Media type is undefined');
-                    return;
-                }
-
-                if (item.media_type === 'movie') {
-                    localStorage.setItem('selectedMovieId', item.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else if (item.media_type === 'tv') {
-                    localStorage.setItem('selectedTvSeriesId', item.id);
-                    window.location.href = 'tv-details.html';
-                }
-                else if (item.media_type === 'person') {
-                    try {
-                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
-                        const response = await fetch(personDetailsUrl);
-                        const personDetails = await response.json();
-
-                        if (personDetails.known_for_department === 'Directing') {
-                            localStorage.setItem('selectedDirectorId', item.id);
-                            window.location.href = 'director-details.html?' + item.id;
-                        }
-                        else {
-                            localStorage.setItem('selectedActorId', item.id);
-                            window.location.href = 'actor-details.html?' + item.id;
-                        }
-                    }
-                    catch (error) {
-                        console.log('Error fetching person details:', error);
-                    }
-                }
-                else {
-                    console.log('Unknown media type:', item.media_type);
-                }
-            }
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('search');
-            const viewAllResultsBtn = document.getElementById('view-all-results');
-            const clearSearchBtn = document.getElementById('clear-search');
-            const searchResultsContainer = document.getElementById('search-results');
-            let selectedIndex = -1;
-
-            function clearSelection() {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                if (selectedIndex >= 0 && selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '';
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '';
-                }
-            }
-
-            function moveSelection(direction) {
-                const results = searchResultsContainer.getElementsByClassName('search-result-card');
-                const totalElements = results.length + 2;
-                clearSelection();
-
-                if (direction === 'down') {
-                    selectedIndex = (selectedIndex + 1) % totalElements;
-                }
-                else if (direction === 'up') {
-                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
-                }
-
-                if (selectedIndex < results.length) {
-                    results[selectedIndex].style.backgroundColor = '#ff8623';
-                    results[selectedIndex].scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length) {
-                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
-                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
-                }
-                else if (selectedIndex === results.length + 1) {
-                    clearSearchBtn.style.backgroundColor = '#ff8623';
-                    clearSearchBtn.scrollIntoView({ block: "nearest" });
-                }
-            }
-
-            searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('down');
-                }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    moveSelection('up');
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (selectedIndex >= 0 && selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        searchResultsContainer.getElementsByClassName('search-result-card')[selectedIndex].click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
-                        viewAllResultsBtn.click();
-                    }
-                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
-                        clearSearchBtn.click();
-                    }
-                    else {
-                        const query = searchInput.value.trim();
-                        localStorage.setItem('searchQuery', query);
-                        window.location.href = 'search.html';
-                    }
-                }
-            });
-
-            searchInput.addEventListener('blur', clearSelection);
-        });
-    </script>
-    <script>
-        const movieCodes = {
-            part1: 'YzVhMjBjODY=',
-            part2: 'MWFjZjdiYjg=',
-            part3: 'ZDllOTg3ZGNjN2YxYjU1OA=='
-        };
-
-        function getMovieCode() {
-            return atob(movieCodes.part1) + atob(movieCodes.part2) + atob(movieCodes.part3);
-        }
-
-        function generateMovieNames(input) {
-            return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
-        }
-
-        function getMovieVerseData(input) {
-            return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
-        }
-
-        async function showMovieOfTheDay() {
-            const year = new Date().getFullYear();
-            const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
-
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const movies = data.results;
-
-                if (movies.length > 0) {
-                    const randomMovie = movies[Math.floor(Math.random() * movies.length)];
-                    localStorage.setItem('selectedMovieId', randomMovie.id);
-                    window.location.href = 'movie-details.html';
-                }
-                else {
-                    fallbackMovieSelection();
-                }
-            }
-            catch (error) {
-                console.log('Error fetching movie:', error);
-                fallbackMovieSelection();
-            }
-        }
-
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const defaultBg = '../../images/universe-1.webp';
-                const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-                document.body.style.backgroundImage = `url('${savedBg}')`;
-
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
-            }
-        });
-
-        let today = new Date();
-        today.setFullYear(today.getFullYear() - 18);
-        let year = today.getFullYear();
-        let month = (today.getMonth() + 1).toString().padStart(2, '0');
-        let day = today.getDate().toString().padStart(2, '0');
-        let dateMinus18Years = `${year}-${month}-${day}`;
-        document.getElementById('editDob').value = dateMinus18Years;
-
-        async function ensureGenreMapIsAvailable() {
-            if (!localStorage.getItem('genreMap')) {
-                await fetchGenreMap();
-            }
-        }
-
-        async function fetchGenreMap() {
-            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const genreMap = data.genres.reduce((map, genre) => {
-                    map[genre.id] = genre.name;
-                    return map;
-                }, {});
-                localStorage.setItem('genreMap', JSON.stringify(genreMap));
-            }
-            catch (error) {
-                console.log('Error fetching genre map:', error);
-            }
-        }
-
-        async function rotateUserStats() {
-            await ensureGenreMapIsAvailable();
-            const stats = [
-                {
-                    label: "Your Current Time",
-                    getValue: () => {
-                        const now = new Date();
-                        let hours = now.getHours();
-                        let minutes = now.getMinutes();
-                        hours = hours < 10 ? '0' + hours : hours;
-                        minutes = minutes < 10 ? '0' + minutes : minutes;
-                        return `${hours}:${minutes}`;
-                    }
-                },
-                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
-                { label: "Most Visited Director", getValue: getMostVisitedDirector },
-                { label: "Most Visited Actor", getValue: getMostVisitedActor },
-                {
-                    label: "Movies Discovered",
-                    getValue: () => {
-                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
-                        return viewedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Movies",
-                    getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-                        return favoritedMovies.length;
-                    }
-                },
-                {
-                    label: "Favorite Genre",
-                    getValue: () => {
-                        const mostCommonGenreCode = getMostCommonGenre();
-                        const genreMapString = localStorage.getItem('genreMap');
-                        if (!genreMapString) {
-                            console.log('No genre map found in localStorage.');
-                            return 'Not Available';
-                        }
-
-                        let genreMap;
-                        try {
-                            genreMap = JSON.parse(genreMapString);
-                        }
-                        catch (e) {
-                            console.log('Error parsing genre map:', e);
-                            return 'Not Available';
-                        }
-
-                        let genreObject;
-                        if (Array.isArray(genreMap)) {
-                            genreObject = genreMap.reduce((acc, genre) => {
-                                acc[genre.id] = genre.name;
-                                return acc;
-                            }, {});
-                        }
-                        else if (typeof genreMap === 'object' && genreMap !== null) {
-                            genreObject = genreMap;
-                        }
-                        else {
-                            console.log('genreMap is neither an array nor a proper object:', genreMap);
-                            return 'Not Available';
-                        }
-
-                        return genreObject[mostCommonGenreCode] || 'Not Available';
-                    }
-                },
-                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
-                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
-                {
-                    label: "Directors Discovered",
-                    getValue: () => {
-                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-                        return viewedDirectors.length;
-                    }
-                },
-                {
-                    label: "Actors Discovered",
-                    getValue: () => {
-                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
-                        return viewedActors.length;
-                    }
-                },
-                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
-            ];
-
-            let currentStatIndex = 0;
-
-            function updateStatDisplay() {
-                const currentStat = stats[currentStatIndex];
-                document.getElementById('stats-label').textContent = currentStat.label + ':';
-                document.getElementById('stats-display').textContent = currentStat.getValue();
-                currentStatIndex = (currentStatIndex + 1) % stats.length;
-            }
-
-            updateStatDisplay();
-
-            const localTimeDiv = document.getElementById('local-time');
-            let statRotationInterval = setInterval(updateStatDisplay, 3000);
-
-            localTimeDiv.addEventListener('click', () => {
-                clearInterval(statRotationInterval);
-                updateStatDisplay();
-                statRotationInterval = setInterval(updateStatDisplay, 3000);
-                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
-            });
-        }
-
-        function updateMovieVisitCount(movieId, movieTitle) {
-            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            if (!movieVisits[movieId]) {
-                movieVisits[movieId] = { count: 0, title: movieTitle };
-            }
-            movieVisits[movieId].count += 1;
-            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
-        }
-
-        function getMostVisitedMovie() {
-            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
-            let mostVisitedMovie = '';
-            let maxVisits = 0;
-
-            for (const movieId in movieVisits) {
-                if (movieVisits[movieId].count > maxVisits) {
-                    mostVisitedMovie = movieVisits[movieId].title;
-                    maxVisits = movieVisits[movieId].count;
-                }
-            }
-
-            return mostVisitedMovie || 'Not Available';
-        }
-
-        function getMostVisitedActor() {
-            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-            let mostVisitedActor = '';
-            let maxVisits = 0;
-
-            for (const actorId in actorVisits) {
-                if (actorVisits[actorId].count > maxVisits) {
-                    mostVisitedActor = actorVisits[actorId].name;
-                    maxVisits = actorVisits[actorId].count;
-                }
-            }
-
-            return mostVisitedActor || 'Not Available';
-        }
-
-        function getMostVisitedDirector() {
-            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-            let mostVisitedDirector = '';
-            let maxVisits = 0;
-
-            for (const directorId in directorVisits) {
-                if (directorVisits[directorId].count > maxVisits) {
-                    mostVisitedDirector = directorVisits[directorId].name;
-                    maxVisits = directorVisits[directorId].count;
-                }
-            }
-
-            return mostVisitedDirector || 'Not Available';
-        }
-
-        function getTriviaAccuracy() {
-            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
-            if (triviaStats.totalAttempted === 0) {
-                return 'No trivia attempted';
-            }
-            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
-            return `${accuracy.toFixed(1)}% accuracy`;
-        }
-
-        function getMostCommonGenre() {
-            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
-            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
-                acc[genre] = (acc[genre] || 0) + 1;
-                return acc;
-            }, {});
-
-            let mostCommonGenre = '';
-            let maxCount = 0;
-
-            for (const genre in genreCounts) {
-                if (genreCounts[genre] > maxCount) {
-                    mostCommonGenre = genre;
-                    maxCount = genreCounts[genre];
-                }
-            }
-
-            return mostCommonGenre || 'Not Available';
-        }
-
-        document.addEventListener('DOMContentLoaded', rotateUserStats);
-
-        function handleSignInOut() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            if (isSignedIn) {
-                localStorage.setItem('isSignedIn', JSON.stringify(false));
-                alert('You have been signed out.');
-            }
-            else {
-                window.location.href = 'sign-in.html';
-                return;
-            }
-
-            updateSignInButtonState();
-        }
-
-        function updateSignInButtonState() {
-            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
-
-            const signInText = document.getElementById('signInOutText');
-            const signInIcon = document.getElementById('signInIcon');
-            const signOutIcon = document.getElementById('signOutIcon');
-
-            if (isSignedIn) {
-                signInText.textContent = 'Sign Out';
-                signInIcon.style.display = 'none';
-                signOutIcon.style.display = 'inline-block';
-            }
-            else {
-                signInText.textContent = 'Sign In';
-                signInIcon.style.display = 'inline-block';
-                signOutIcon.style.display = 'none';
-            }
-        }
-
-        document.addEventListener("DOMContentLoaded", function() {
-            updateSignInButtonState();
-            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
-        });
-
-        const form = document.getElementById('form1');
-
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        });
-
-        function handleSearch() {
-            const searchQuery = document.getElementById('search').value;
-            localStorage.setItem('searchQuery', searchQuery);
-            window.location.href = 'search.html';
-        }
-
-        function closeModal() {
-            document.getElementById('editProfileModal').style.display = 'none';
-        }
-    </script>
-    <footer style="margin-top: 800px">
-        <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
-        </a>
-    </footer>
-    <div id="mobile-bottom-bar" class="mobile-bottom-bar">
-        <a href="chat.html" class="bottom-bar-item">
-            <i class="fas fa-comments"></i>
-            <span>Chat</span>
-        </a>
-        <a href="settings.html" class="bottom-bar-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        <a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
-            <i class="fas fa-surprise"></i>
-            <span>Surprise Me</span>
-        </a>
-        <a href="movie-match.html" class="bottom-bar-item">
-            <i class="fas fa-film"></i>
-            <span>Match</span>
-        </a>
-        <a href="movie-timeline.html" class="bottom-bar-item">
-            <i class="fas fa-clock"></i>
-            <span>Timeline</span>
-        </a>
-        <a href="chatbot.html" class="bottom-bar-item">
-            <i class="fas fa-robot"></i>
-            <span>Chatbot</span>
-        </a>
-        <a href="trivia.html" class="bottom-bar-item">
-            <i class="fas fa-question-circle"></i>
-            <span>Trivia</span>
-        </a>
-    </div>
-    <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
-        <i class="fas fa-ellipsis-h"></i><br>
-        <span>Menu</span>
-    </button>
-    <script>
-        window.addEventListener('load', function() {
-            adjustAnchorHeights();
-        });
-
-        window.addEventListener('resize', adjustAnchorHeights);
-
-        function adjustAnchorHeights() {
-            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
-            let maxHeight = 0;
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = 'auto';
-                const anchorHeight = anchor.getBoundingClientRect().height;
-                maxHeight = Math.max(maxHeight, anchorHeight);
-            });
-
-            bottomBarAnchors.forEach(anchor => {
-                anchor.style.height = `${maxHeight}px`;
-            });
-        }
-
-        let lastScrollY = window.scrollY;
-
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-
-            if (currentScrollY > lastScrollY && currentScrollY > 0) {
-                document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
-            }
-            else {
-                document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
-            }
-
-            lastScrollY = currentScrollY;
-        });
-
-        let isAnimating = false;
-
-        document.getElementById('menu-btn').addEventListener('click', () => {
-            if (isAnimating) return;
-
-            isAnimating = true;
-
-            const buttonIds = [
-                'chat-button',
-                'settings-btn',
-                'movie-of-the-day-btn',
-                'movie-match-btn3',
-                'movie-timeline-btn',
-                'discussions-btn',
-                'trivia-btn',
-            ];
-
-            buttonIds.forEach((id, index) => {
-                const button = document.getElementById(id);
-                if (button.style.display === 'none' || !button.style.display) {
-                    button.style.display = 'block';
-                    setTimeout(() => {
-                        button.style.opacity = '1';
-                        button.style.transform = 'translateY(0)';
-                    }, 50 * index);
-                }
-                else {
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                }
-
-                setTimeout(() => {
-                    button.style.display = button.style.opacity === '1' ? 'block' : 'none';
-                    if (index === buttonIds.length - 1) {
-                        isAnimating = false;
-                    }
-                }, 500 + 50 * index);
-            });
-        });
-
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 767) {
-                const buttonIds = [
-                    'chat-button',
-                    'settings-btn',
-                    'movie-of-the-day-btn',
-                    'movie-match-btn3',
-                    'movie-timeline-btn',
-                    'discussions-btn',
-                    'trivia-btn',
-                ];
-
-                buttonIds.forEach(id => {
-                    const button = document.getElementById(id);
-                    button.style.display = 'none';
-                    button.style.opacity = '0';
-                    button.style.transform = 'translateY(20px)';
-                });
-            }
-        });
-    </script>
-</body>
-</html>
diff --git a/MovieVerse-Mobile/www/index.html b/MovieVerse-Mobile/www/index.html
index cbd545c2..cb97d18f 100644
--- a/MovieVerse-Mobile/www/index.html
+++ b/MovieVerse-Mobile/www/index.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -48,12 +47,10 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" as="style">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
-
     <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-
     <!-- Schema.org markup for Rich Results -->
     <script type="application/ld+json">
         {
@@ -114,7 +111,6 @@
             "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
         }
     </script>
-
     <style>
         @font-face {
             font-family: 'Poppins';
@@ -585,7 +581,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <ul id="newReleasesList"></ul>
         </div>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 10000000">
         <a id="heading-href" class="notranslate" style="cursor: pointer; text-align: center">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px !important; font-size: 2.1em; font-weight: bold;">
@@ -629,7 +624,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <li><a href="MovieVerse-Frontend/html/feedback.html">MovieVerse Feedback</a></li>
         </ul>
     </nav>
-
     <div class="mobile-sign-in-container">
         <button id="mobileGoogleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="mobileSignInOutText">Sign In</span>
@@ -641,17 +635,14 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <i class="fas fa-user" id="mobileProfileIcon"></i>
         </button>
     </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <div class="genres">
         <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2>
     </div>
     <div id="most-popular-pagination" class="pagination" style="text-align: center"></div>
     <main id="most-popular"></main>
-
     <div id="ad-container3" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -665,7 +656,6 @@ <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="recommendedDIV">
         <h2 id="other" style="cursor: pointer" title="Here are some personalized movie suggestions we've generated based on your preferences! Check them out, and let us know what you think!">
             Recommended For You: Personalized Movie Suggestions
@@ -673,7 +663,6 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     </div>
     <div id="recommended-pagination" class="pagination" style="text-align: center"></div>
     <main id="recommended"></main>
-
     <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -686,13 +675,11 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="award-winning-div">
         <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning Movies</h2>
     </div>
     <div id="award-winning-pagination" class="pagination" style="text-align: center"></div>
     <main id="award-winning"></main>
-
     <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -705,13 +692,11 @@ <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
         <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; margin-right: 10px; margin-top: 25px; cursor: pointer;">Change Director</button>
     </div>
     <main id="director-spotlight"></main>
-
     <div id="ad-container5" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -724,13 +709,11 @@ <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="action-div">
         <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</h2>
     </div>
     <div id="action-pagination" class="pagination" style="text-align: center"></div>
     <main id="action"></main>
-
     <div id="ad-container6" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -743,13 +726,11 @@ <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="vietnamese-div">
         <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese Movies</h2>
     </div>
     <div id="vietnamese-pagination" class="pagination" style="text-align: center"></div>
     <main id="vietnamese"></main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -762,13 +743,11 @@ <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="indian-div">
         <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian Movies</h2>
     </div>
     <div id="indian-pagination" class="pagination" style="text-align: center"></div>
     <main id="indian"></main>
-
     <div id="ad-container4" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -781,13 +760,11 @@ <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="korean-div">
         <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies</h2>
     </div>
     <div id="korean-pagination" class="pagination" style="text-align: center"></div>
     <main id="korean"></main>
-
     <div id="ad-container7" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -800,115 +777,96 @@ <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies<
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="tv-series-div">
         <h2 id="other" style="cursor: pointer">Binge-Worthy Series: Trending TV Series</h2>
     </div>
     <div id="tv-series-pagination" class="pagination" style="text-align: center"></div>
     <main id="tv-series" ></main>
-
     <div class="genres" id="hidden-gems-div">
         <h2 id="other" style="cursor: pointer">Hidden Treasures: Discover Gems in Cinema</h2>
     </div>
     <div id="hidden-gems-pagination" class="pagination" style="text-align: center"></div>
     <main id="hidden-gems"></main>
-
     <div class="genres" id="horror-div">
         <h2 id="other" style="cursor: pointer">Scream Queens & Slashers: Trending Horror Movies</h2>
     </div>
     <div id="horror-pagination" class="pagination" style="text-align: center"></div>
     <main id="horror"></main>
-
     <div class="genres" id="documentary-div">
         <h2 id="other" style="cursor: pointer">Real Stories: Trending Documentary Movies</h2>
     </div>
     <div id="documentary-pagination" class="pagination" style="text-align: center"></div>
     <main id="documentary" ></main>
-
     <div class="genres" id="animation-div">
         <h2 id="other" style="cursor: pointer">Animated Adventures: Trending Animated Movies</h2>
     </div>
     <div id="animation-pagination" class="pagination" style="text-align: center"></div>
     <main id="animation"></main>
-
     <div class="genres" id="sci-fi-div">
         <h2 id="other" style="cursor: pointer">Future Visions: Trending Science Fiction Movies</h2>
     </div>
     <div id="sci-fi-pagination" class="pagination" style="text-align: center"></div>
     <main id="sci-fi"></main>
-
     <div class="genres" id="western-div">
         <h2 id="other" style="cursor: pointer">Wild West: Trending Western Movies</h2>
     </div>
     <div id="western-pagination" class="pagination" style="text-align: center"></div>
     <main id="western"></main>
-
     <div class="genres" id="romantic-div">
         <h2 id="other" style="cursor: pointer">Love Is in the Air: Trending Romantic Movies</h2>
     </div>
     <div id="romantic-pagination" class="pagination" style="text-align: center"></div>
     <main id="romantic"></main>
-
     <div class="genres" id="thriller-div">
         <h2 id="other" style="cursor: pointer">Edge of Your Seat: Trending Thriller Movies</h2>
     </div>
     <div id="thriller-pagination" class="pagination" style="text-align: center"></div>
     <main id="thriller"></main>
-
     <div class="genres" id="war-div">
         <h2 id="other" style="cursor: pointer">War Stories: Trending War Movies</h2>
     </div>
     <div id="war-pagination" class="pagination" style="text-align: center"></div>
     <main id="war"></main>
-
     <div class="genres" id="mystery-div">
         <h2 id="other" style="cursor: pointer">Whodunit? Mystery & Intrigue in Trending Mystery Movies</h2>
     </div>
     <div id="mystery-pagination" class="pagination" style="text-align: center"></div>
     <main id="mystery"></main>
-
     <div class="genres" id="crime-div">
         <h2 id="other" style="cursor: pointer">Underworld Tales: Trending Crime Movies</h2>
     </div>
     <div id="crime-pagination" class="pagination" style="text-align: center"></div>
     <main id="crime"></main>
-
     <div class="genres" id="comedy-div">
         <h2 id="other" style="cursor: pointer">Laughs Galore: Trending Comedy Movies</h2>
     </div>
     <div id="comedy-pagination" class="pagination" style="text-align: center"></div>
     <main id="comedy"></main>
-
     <div class="genres" id="fantasy-div">
         <h2 id="other" style="cursor: pointer">Other Worlds: Trending Fantasy Movies</h2>
     </div>
     <div id="fantasy-pagination" class="pagination" style="text-align: center"></div>
     <main id="fantasy"></main>
-
     <div class="genres" id="family-div">
         <h2 id="other" style="cursor: pointer">Family Fun Time: Trending Family Movies</h2>
     </div>
     <div id="family-pagination" class="pagination" style="text-align: center"></div>
     <main id="family"></main>
-
     <div class="genres" id="musical-div">
         <h2 id="other" style="cursor: pointer">Enchanting Melodies: Trending Musical Movies</h2>
     </div>
     <div id="musical-pagination" class="pagination" style="text-align: center"></div>
     <main id="musical"></main>
-
     <div class="genres" id="drama-div">
         <h2 id="other" style="cursor: pointer">Emotional Journeys: Trending Drama Movies</h2>
     </div>
     <div id="drama-pagination" class="pagination" style="text-align: center"></div>
     <main id="drama"></main>
-
     <div class="genres" id="classic-div">
         <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movies</h2>
     </div>
     <div id="classic-pagination" class="pagination" style="text-align: center"></div>
     <main id="classic"></main>
-
     <button id="chat-button" onclick="window.location.href='MovieVerse-Frontend/html/chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
     <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
@@ -917,7 +875,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
     <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="MovieVerse-Frontend/html/chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -952,23 +909,19 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             <span>Top</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <footer style="margin-top: 40px">
         <p id="footer">© 2024 The MovieVerse. All rights reserved.</p>
         <p>Learn more <a href="MovieVerse-Frontend/html/about.html" id="githubLink10">about The MovieVerse</a> and <a href="MovieVerse-Frontend/html/notifications.html" id="githubLink8">what we offer.</a></p>
         <p style="font-size: 0.1px">View our demos at: <a href="MovieVerse-Frontend/html/inception.html" id="githubLink11">Inception</a>, <a href="MovieVerse-Frontend/html/christopher-nolan.html" id="githubLink16">Christopher Nolan</a>, <a href="MovieVerse-Frontend/html/leonardo-dicaprio.html" id="githubLink9">Leonardo DiCaprio</a>, use our <a href="MovieVerse-Frontend/html/chat.html" id="githubLink14">chat application</a>, or explore the <a href="MovieVerse-Frontend/html/user-profile.html" id="githubLink5">profile feature</a>!</p>
     </footer>
-
     <div id="google_translate_element"></div>
     <div id="translate_control">
         <div class="translate-trigger">Translate</div>
     </div>
-
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
         function googleTranslateElementInit() {
diff --git a/index.html b/index.html
index 62e0d19e..016c359e 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -48,12 +47,10 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" as="style">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
-
     <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-
     <!-- Schema.org markup for Rich Results -->
     <script type="application/ld+json">
         {
@@ -114,7 +111,6 @@
             "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
         }
     </script>
-
     <style>
         @font-face {
             font-family: 'Poppins';
@@ -585,7 +581,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <ul id="newReleasesList"></ul>
         </div>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 10000000">
         <a id="heading-href" class="notranslate" style="cursor: pointer; text-align: center">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px !important; font-size: 2.1em; font-weight: bold;">
@@ -629,7 +624,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <li><a href="MovieVerse-Frontend/html/feedback.html">MovieVerse Feedback</a></li>
         </ul>
     </nav>
-
     <div class="mobile-sign-in-container">
         <button id="mobileGoogleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="mobileSignInOutText">Sign In</span>
@@ -641,17 +635,14 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <i class="fas fa-user" id="mobileProfileIcon"></i>
         </button>
     </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <div class="genres">
         <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2>
     </div>
     <div id="most-popular-pagination" class="pagination" style="text-align: center"></div>
     <main id="most-popular"></main>
-
     <div id="ad-container3" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -665,7 +656,6 @@ <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="recommendedDIV">
         <h2 id="other" style="cursor: pointer" title="Here are some personalized movie suggestions we've generated based on your preferences! Check them out, and let us know what you think!">
             Recommended For You: Personalized Movie Suggestions
@@ -673,7 +663,6 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     </div>
     <div id="recommended-pagination" class="pagination" style="text-align: center"></div>
     <main id="recommended"></main>
-
     <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -686,13 +675,11 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="award-winning-div">
         <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning Movies</h2>
     </div>
     <div id="award-winning-pagination" class="pagination" style="text-align: center"></div>
     <main id="award-winning"></main>
-
     <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -705,13 +692,11 @@ <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
         <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; margin-right: 10px; margin-top: 25px; cursor: pointer;">Change Director</button>
     </div>
     <main id="director-spotlight"></main>
-
     <div id="ad-container5" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -724,13 +709,11 @@ <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="action-div">
         <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</h2>
     </div>
     <div id="action-pagination" class="pagination" style="text-align: center"></div>
     <main id="action"></main>
-
     <div id="ad-container6" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -743,13 +726,11 @@ <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="vietnamese-div">
         <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese Movies</h2>
     </div>
     <div id="vietnamese-pagination" class="pagination" style="text-align: center"></div>
     <main id="vietnamese"></main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -762,13 +743,11 @@ <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="indian-div">
         <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian Movies</h2>
     </div>
     <div id="indian-pagination" class="pagination" style="text-align: center"></div>
     <main id="indian"></main>
-
     <div id="ad-container4" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -781,13 +760,11 @@ <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="korean-div">
         <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies</h2>
     </div>
     <div id="korean-pagination" class="pagination" style="text-align: center"></div>
     <main id="korean"></main>
-
     <div id="ad-container7" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -800,115 +777,96 @@ <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies<
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="tv-series-div">
         <h2 id="other" style="cursor: pointer">Binge-Worthy Series: Trending TV Series</h2>
     </div>
     <div id="tv-series-pagination" class="pagination" style="text-align: center"></div>
     <main id="tv-series" ></main>
-
     <div class="genres" id="hidden-gems-div">
         <h2 id="other" style="cursor: pointer">Hidden Treasures: Discover Gems in Cinema</h2>
     </div>
     <div id="hidden-gems-pagination" class="pagination" style="text-align: center"></div>
     <main id="hidden-gems"></main>
-
     <div class="genres" id="horror-div">
         <h2 id="other" style="cursor: pointer">Scream Queens & Slashers: Trending Horror Movies</h2>
     </div>
     <div id="horror-pagination" class="pagination" style="text-align: center"></div>
     <main id="horror"></main>
-
     <div class="genres" id="documentary-div">
         <h2 id="other" style="cursor: pointer">Real Stories: Trending Documentary Movies</h2>
     </div>
     <div id="documentary-pagination" class="pagination" style="text-align: center"></div>
     <main id="documentary" ></main>
-
     <div class="genres" id="animation-div">
         <h2 id="other" style="cursor: pointer">Animated Adventures: Trending Animated Movies</h2>
     </div>
     <div id="animation-pagination" class="pagination" style="text-align: center"></div>
     <main id="animation"></main>
-
     <div class="genres" id="sci-fi-div">
         <h2 id="other" style="cursor: pointer">Future Visions: Trending Science Fiction Movies</h2>
     </div>
     <div id="sci-fi-pagination" class="pagination" style="text-align: center"></div>
     <main id="sci-fi"></main>
-
     <div class="genres" id="western-div">
         <h2 id="other" style="cursor: pointer">Wild West: Trending Western Movies</h2>
     </div>
     <div id="western-pagination" class="pagination" style="text-align: center"></div>
     <main id="western"></main>
-
     <div class="genres" id="romantic-div">
         <h2 id="other" style="cursor: pointer">Love Is in the Air: Trending Romantic Movies</h2>
     </div>
     <div id="romantic-pagination" class="pagination" style="text-align: center"></div>
     <main id="romantic"></main>
-
     <div class="genres" id="thriller-div">
         <h2 id="other" style="cursor: pointer">Edge of Your Seat: Trending Thriller Movies</h2>
     </div>
     <div id="thriller-pagination" class="pagination" style="text-align: center"></div>
     <main id="thriller"></main>
-
     <div class="genres" id="war-div">
         <h2 id="other" style="cursor: pointer">War Stories: Trending War Movies</h2>
     </div>
     <div id="war-pagination" class="pagination" style="text-align: center"></div>
     <main id="war"></main>
-
     <div class="genres" id="mystery-div">
         <h2 id="other" style="cursor: pointer">Whodunit? Mystery & Intrigue in Trending Mystery Movies</h2>
     </div>
     <div id="mystery-pagination" class="pagination" style="text-align: center"></div>
     <main id="mystery"></main>
-
     <div class="genres" id="crime-div">
         <h2 id="other" style="cursor: pointer">Underworld Tales: Trending Crime Movies</h2>
     </div>
     <div id="crime-pagination" class="pagination" style="text-align: center"></div>
     <main id="crime"></main>
-
     <div class="genres" id="comedy-div">
         <h2 id="other" style="cursor: pointer">Laughs Galore: Trending Comedy Movies</h2>
     </div>
     <div id="comedy-pagination" class="pagination" style="text-align: center"></div>
     <main id="comedy"></main>
-
     <div class="genres" id="fantasy-div">
         <h2 id="other" style="cursor: pointer">Other Worlds: Trending Fantasy Movies</h2>
     </div>
     <div id="fantasy-pagination" class="pagination" style="text-align: center"></div>
     <main id="fantasy"></main>
-
     <div class="genres" id="family-div">
         <h2 id="other" style="cursor: pointer">Family Fun Time: Trending Family Movies</h2>
     </div>
     <div id="family-pagination" class="pagination" style="text-align: center"></div>
     <main id="family"></main>
-
     <div class="genres" id="musical-div">
         <h2 id="other" style="cursor: pointer">Enchanting Melodies: Trending Musical Movies</h2>
     </div>
     <div id="musical-pagination" class="pagination" style="text-align: center"></div>
     <main id="musical"></main>
-
     <div class="genres" id="drama-div">
         <h2 id="other" style="cursor: pointer">Emotional Journeys: Trending Drama Movies</h2>
     </div>
     <div id="drama-pagination" class="pagination" style="text-align: center"></div>
     <main id="drama"></main>
-
     <div class="genres" id="classic-div">
         <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movies</h2>
     </div>
     <div id="classic-pagination" class="pagination" style="text-align: center"></div>
     <main id="classic"></main>
-
     <button id="chat-button" onclick="window.location.href='MovieVerse-Frontend/html/chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
     <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
@@ -917,7 +875,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
     <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="MovieVerse-Frontend/html/chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -952,23 +909,19 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             <span>Top</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <footer style="margin-top: 40px">
         <p id="footer">© 2024 The MovieVerse. All rights reserved.</p>
         <p>Learn more <a href="MovieVerse-Frontend/html/about.html" id="githubLink10">about The MovieVerse</a> and <a href="MovieVerse-Frontend/html/notifications.html" id="githubLink8">what we offer.</a></p>
         <p style="font-size: 0.1px">View our demos at: <a href="MovieVerse-Frontend/html/inception.html" id="githubLink11">Inception</a>, <a href="MovieVerse-Frontend/html/christopher-nolan.html" id="githubLink16">Christopher Nolan</a>, <a href="MovieVerse-Frontend/html/leonardo-dicaprio.html" id="githubLink9">Leonardo DiCaprio</a>, use our <a href="MovieVerse-Frontend/html/chat.html" id="githubLink14">chat application</a>, or explore the <a href="MovieVerse-Frontend/html/user-profile.html" id="githubLink5">profile feature</a>!</p>
     </footer>
-
     <div id="google_translate_element"></div>
     <div id="translate_control">
         <div class="translate-trigger">Translate</div>
     </div>
-
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
         function googleTranslateElementInit() {

From 31eede8eb73fb54be6273b6e996199b620d407b2 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Thu, 18 Jul 2024 10:26:15 +0700
Subject: [PATCH 09/18] Final: Enhance app functionalities (#196)

---
 .../xcschemes/xcschememanagement.plist        |   4 +-
 .../ios/MovieVerse.xcodeproj/project.pbxproj  |  36 +++++++++---------
 .../UserInterfaceState.xcuserstate            | Bin 13607 -> 16199 bytes
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist b/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
index abace984..2c8b6bbd 100644
--- a/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
+++ b/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
@@ -7,12 +7,12 @@
 		<key>Cordova.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>3</integer>
+			<integer>2</integer>
 		</dict>
 		<key>CordovaLib.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>2</integer>
+			<integer>3</integer>
 		</dict>
 	</dict>
 </dict>
diff --git a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
index 359b349b..e10f5ad1 100644
--- a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
+++ b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
@@ -8,6 +8,7 @@
 
 /* Begin PBXBuildFile section */
 		0207DA581B56EA530066E2B4 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 0207DA571B56EA530066E2B4 /* Assets.xcassets */; };
+		0697E58733504E4B9E89AC46 /* CDVStatusBar.m in Sources */ = {isa = PBXBuildFile; fileRef = 95B9657E7DAD40B1A57730D3 /* CDVStatusBar.m */; };
 		1D3623260D0F684500981E51 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 1D3623250D0F684500981E51 /* AppDelegate.m */; };
 		1D60589B0D05DD56006BFB54 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 29B97316FDCFA39411CA2CEA /* main.m */; };
 		301BF552109A68D80062928A /* libCordova.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 301BF535109A57CC0062928A /* libCordova.a */; settings = {ATTRIBUTES = (Required, ); }; };
@@ -16,8 +17,7 @@
 		4E7CA2B6272ABB0D00177EF9 /* config.xml in Copy Staging Resources */ = {isa = PBXBuildFile; fileRef = F840E1F0165FE0F500CFE078 /* config.xml */; };
 		4E7CA2B7272ABB0D00177EF9 /* www in Copy Staging Resources */ = {isa = PBXBuildFile; fileRef = 301BF56E109A69640062928A /* www */; };
 		6AFF5BF91D6E424B00AB3073 /* CDVLaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6AFF5BF81D6E424B00AB3073 /* CDVLaunchScreen.storyboard */; };
-		70B9A13EF2054688973B7685 /* CDVStatusBar.m in Sources */ = {isa = PBXBuildFile; fileRef = 3CDC76DB70D4467C8EBCD9DE /* CDVStatusBar.m */; };
-		CA583DA8FD7CF9576A4DB510 /* libPods-MovieVerse.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 09685F2C616288208F45DA74 /* libPods-MovieVerse.a */; };
+		792F6787FC6A2823F75800E6 /* libPods-MovieVerse.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4B0847137D1380BC1673EAB1 /* libPods-MovieVerse.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -61,7 +61,7 @@
 
 /* Begin PBXFileReference section */
 		0207DA571B56EA530066E2B4 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
-		09685F2C616288208F45DA74 /* libPods-MovieVerse.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-MovieVerse.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		1C20D73F0C87CD0D33E21AAF /* Pods-MovieVerse.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.debug.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.debug.xcconfig"; sourceTree = "<group>"; };
 		1D3623240D0F684500981E51 /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
 		1D3623250D0F684500981E51 /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
 		1D6058910D05DD3D006BFB54 /* MovieVerse.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = MovieVerse.app; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -75,12 +75,12 @@
 		3047A5101AB8059700498E2A /* build-release.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = "build-release.xcconfig"; path = "cordova/build-release.xcconfig"; sourceTree = SOURCE_ROOT; };
 		3047A5111AB8059700498E2A /* build.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = build.xcconfig; path = cordova/build.xcconfig; sourceTree = SOURCE_ROOT; };
 		32CA4F630368D1EE00C91783 /* MovieVerse-Prefix.pch */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "MovieVerse-Prefix.pch"; sourceTree = "<group>"; };
-		3CDC76DB70D4467C8EBCD9DE /* CDVStatusBar.m */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.objc; name = CDVStatusBar.m; path = "cordova-plugin-statusbar/CDVStatusBar.m"; sourceTree = "<group>"; };
+		4B0847137D1380BC1673EAB1 /* libPods-MovieVerse.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-MovieVerse.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		6AFF5BF81D6E424B00AB3073 /* CDVLaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = CDVLaunchScreen.storyboard; sourceTree = "<group>"; };
-		8B6975EB1EB6B40C2EDAFB3D /* Pods-MovieVerse.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.release.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.release.xcconfig"; sourceTree = "<group>"; };
-		8CA19BF3BD13464D53C78056 /* Pods-MovieVerse.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.debug.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.debug.xcconfig"; sourceTree = "<group>"; };
 		8D1107310486CEB800E47090 /* MovieVerse-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "MovieVerse-Info.plist"; plistStructureDefinitionIdentifier = "com.apple.xcode.plist.structure-definition.iphone.info-plist"; sourceTree = "<group>"; };
-		A6CC00D27F2549A789D7EA48 /* CDVStatusBar.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = CDVStatusBar.h; path = "cordova-plugin-statusbar/CDVStatusBar.h"; sourceTree = "<group>"; };
+		8D9EF86A63246DEB54AD00C7 /* Pods-MovieVerse.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.release.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.release.xcconfig"; sourceTree = "<group>"; };
+		95B9657E7DAD40B1A57730D3 /* CDVStatusBar.m */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.objc; name = CDVStatusBar.m; path = "cordova-plugin-statusbar/CDVStatusBar.m"; sourceTree = "<group>"; };
+		DED26FEDD6394551B274BD1D /* CDVStatusBar.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = CDVStatusBar.h; path = "cordova-plugin-statusbar/CDVStatusBar.h"; sourceTree = "<group>"; };
 		EB87FDF31871DA8E0020F90C /* www */ = {isa = PBXFileReference; lastKnownFileType = folder; name = www; path = ../../www; sourceTree = "<group>"; };
 		EB87FDF41871DAF40020F90C /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; name = config.xml; path = ../../config.xml; sourceTree = "<group>"; };
 		ED33DF2A687741AEAF9F8254 /* Bridging-Header.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "Bridging-Header.h"; sourceTree = "<group>"; };
@@ -93,7 +93,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				301BF552109A68D80062928A /* libCordova.a in Frameworks */,
-				CA583DA8FD7CF9576A4DB510 /* libPods-MovieVerse.a in Frameworks */,
+				792F6787FC6A2823F75800E6 /* libPods-MovieVerse.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -121,7 +121,7 @@
 				29B97317FDCFA39411CA2CEA /* Resources */,
 				29B97323FDCFA39411CA2CEA /* Frameworks */,
 				19C28FACFE9D520D11CA2CBB /* Products */,
-				92A3381BDFE98E7D600C23AD /* Pods */,
+				A6355AE4166E96DD31717F20 /* Pods */,
 			);
 			name = CustomTemplate;
 			sourceTree = "<group>";
@@ -156,7 +156,7 @@
 		29B97323FDCFA39411CA2CEA /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
-				09685F2C616288208F45DA74 /* libPods-MovieVerse.a */,
+				4B0847137D1380BC1673EAB1 /* libPods-MovieVerse.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -183,18 +183,18 @@
 		307C750510C5A3420062BCA9 /* Plugins */ = {
 			isa = PBXGroup;
 			children = (
-				3CDC76DB70D4467C8EBCD9DE /* CDVStatusBar.m */,
-				A6CC00D27F2549A789D7EA48 /* CDVStatusBar.h */,
+				95B9657E7DAD40B1A57730D3 /* CDVStatusBar.m */,
+				DED26FEDD6394551B274BD1D /* CDVStatusBar.h */,
 			);
 			name = Plugins;
 			path = MovieVerse/Plugins;
 			sourceTree = SOURCE_ROOT;
 		};
-		92A3381BDFE98E7D600C23AD /* Pods */ = {
+		A6355AE4166E96DD31717F20 /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				8CA19BF3BD13464D53C78056 /* Pods-MovieVerse.debug.xcconfig */,
-				8B6975EB1EB6B40C2EDAFB3D /* Pods-MovieVerse.release.xcconfig */,
+				1C20D73F0C87CD0D33E21AAF /* Pods-MovieVerse.debug.xcconfig */,
+				8D9EF86A63246DEB54AD00C7 /* Pods-MovieVerse.release.xcconfig */,
 			);
 			name = Pods;
 			path = Pods;
@@ -216,7 +216,7 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 1D6058960D05DD3E006BFB54 /* Build configuration list for PBXNativeTarget "MovieVerse" */;
 			buildPhases = (
-				336D929C7E4EBB5DAE982A7D /* [CP] Check Pods Manifest.lock */,
+				0307478383C8F5F0F98C1448 /* [CP] Check Pods Manifest.lock */,
 				857339E32710CC9700A1C74C /* Copy Staging Resources */,
 				1D60588D0D05DD3D006BFB54 /* Resources */,
 				1D60588E0D05DD3D006BFB54 /* Sources */,
@@ -301,7 +301,7 @@
 /* End PBXResourcesBuildPhase section */
 
 /* Begin PBXShellScriptBuildPhase section */
-		336D929C7E4EBB5DAE982A7D /* [CP] Check Pods Manifest.lock */ = {
+		0307478383C8F5F0F98C1448 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -333,7 +333,7 @@
 				1D60589B0D05DD56006BFB54 /* main.m in Sources */,
 				1D3623260D0F684500981E51 /* AppDelegate.m in Sources */,
 				302D95F114D2391D003F00A1 /* MainViewController.m in Sources */,
-				70B9A13EF2054688973B7685 /* CDVStatusBar.m in Sources */,
+				0697E58733504E4B9E89AC46 /* CDVStatusBar.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate
index 1c694f58cbdf464f95a24be7367557621df0df3f..5072db3c6678e9eb9c8729ab4dab686bc3944e0b 100644
GIT binary patch
delta 8876
zcmc&(d0bQ1wmy4EKtn=EAY>o|IU!_DRB&t&6{%Fk0dZDD2pSDUNf1$M_OVW_w%W$l
zxe8iE>r|;@C+kq#TB}v7*15HVt<|cv)~Z+E4v1Ru-sd0h{vP>-oSePaaMs%E`_|rB
zIb!d`+4-R0wV|H`n}TK_1+)a6KrfIB`hy`LAGm=Bi~wFx3jClPj0Y0{2d01-;8idS
z%m&q96<7`40c*founw#T8^F6@BiIZ+1be`zU@tfT4uY@25%3K-3(kS>!1v%M@C&#E
zE`#5}U*IPA8~h6b$b%vn2bDpnfqKZoWY`v_!*;Me>;N-hN0<qpgPmX&><W9qTsR00
zhIw!p91csN9|m9<tbi}TiEt{M24}#TFa+npMQ|ysgm1%l;YL^k--DarCvYd+1$V<e
z@LPBSo`k31X?O;nh35bteg}Vs7vLor{0rWMf5ThwHsT>ZYK#OZ2FZ{PB_chtAv<!Q
zE~qQYM%_?%)C2WIIj9%PMZHlU)ED(bgHQqTAP!AJFQUn43Yv<hq3P%)^fH=(W}!FH
zTWASdimK5nv<7WPThLat4Sk3{L7$^9&_VPyIut}l&@prpeTRNTzoRSYD!PVlqQB9<
zFoXFx0t;|7j>mGWzzJB3Ti}+s6>g2&;Ail&I1RVO>9`$kk2~ND+!1Hu=Wr+78TY|`
zaX;K255NQQAUqfs;u7q`qwr{4iv9QnJP`-+i+CEIi|64+^YH?_5HG?@LR(>)<#&>l
zCpKiXZ0c&>q+^EN)wEeFdrC7`OMAPP9oyNPyHZ+YG;5XGGNXNFNQX|bt(tah(lWDS
zs=Y<Wj1+rHW@<Zo%cf0Q*;{pJ-@I9~4jD~5x@xp|Cur1<8N%cfEm76{%KHLH?hYO0
z_4orW*AV~_<|XRQp&f$O5i9sn;#j#l#Eb08Hw^jqr0$PU-^iAR@MTK(LlKdRges+~
ze^=iakGr?K)bGwIFE1CvLmI745IPtU8wy6o1jCb^^P08$)G*{~<XT4+YpgOPvCREH
zc88(vsw&yUrjM?>X47AuUVBw(p+>BNDx3WgBmE0}B}JZLj<LmFCX$I^RE&dpmg&s&
zWcn}znIdL5<7dj4am*{sBIa$T-)d$J^Da}vY-RQ_Cz$ih1?D1igSo}r0RY4T7T7>4
zt+qBG19S!5K|e4Q6w+$*g7P|FAgKGKM*i^!Ce?Imv>ArOQvFuf8XR>1H2Q?>B|nm%
z$j>#Wgf{?h0U1nogpNgfH0UrRWJF9fumT5TtD-jTWC+Qx0#4=<85$}Q+nOAz9Zv-<
zDnWBnK)lC6E6|#{^$eAI7Nmi;ARV*=?Li0XXgbIQ&xO7buQv@RW5`%iNamB_BtXiK
zf-LYn=uAbr(5J};-RKkb06m#Yp*1nyMnz;4@e?=62_;HeX7&axsz4vmmkc8#i1#oU
z00vUIbmkJs>z`HVE(v&wJnqumtdc_aSgJjTcpeG-A!Y*e0u5C`=wpc%Re{3Lhmyp;
z^-7AuO327snTLy`R)*OJMpn^Gki(#unkxZ5Fba$wQ0OZtE2cJcdv@s;@D#iKf&Ai8
zq=fhglPAs#B}#Lp53^opJOIi<l~Oqx!w~u@YjlXJ8w)DHxX?+dKlTMMaX?1zUYQ=R
zyL*0M_%aX#Bs4VEh$ev-Lo;ISU~*_%tTQ;33QYr}!Aro`Cp*V6G~e$YKtD^}-u!@P
zjGHi|jFi;bn+aaY&Ca0?R)Lue=|8G$sMk{vUW9pKd*1?Iq1%y_(Xq29;OJQB3HVAg
z?mv;EyL(u^zs#TGD=RH<ccAm?*TQRHQIN5%2Cst<m;>GbZ-TjC9+(dnfQ6)jj3eX8
z1o8rzNP>hAj!aq&7BhzM3sizC<`VsUn=z6XiLmxHg}gz-EhKM}XkyC~D<7JxbI0L#
zd));AkFO+8obX^U=&m0f?kn%=De)BNkIEA#J{W&=IP7`{-xzmk{xEl*So_2|StVmU
ze$P;^+y5jj-uwz*S)k+CfV;#`9ielAY(q5#r9Q7WCy*a-JA6e&es|zWs{D`4@_I_B
zLk}P7QK#FL1%~@dsilU);gkh4ecnP($*?B{th_XTR2Qn+Usstm;mUlEOeWsC?^{5N
z<unVmFB<u}m$yE*AAwI8Srzyg>>yLgv?{O@>>|_2D`7BKX1Kk9{JOXYyZkdGd1766
z8l_>SzOs_So^F4cH{gG4O1*{8z`n4B&%qbuCGv6=_!8_VGssMmG$0(0+NyQ?2iMnC
z7kA09!0<ZH4}lg-i8qE9ahM6#q0&)sf{`r)$G~y$EqRs9BD0r)li(CMO<p4*GAHb{
zu|c9nJ?3Z*UGy{$&i^p6m#-qj;|~jV@RbB;o`YU@X`WcqK*aAUbPvrhb(DJwsn_5<
zt<oRBj{|9CmX&!5hgJmK{%&IN%x9arUYndXaXNaY$;n=Z4dnH@O8psJ=uIm%H!GtG
z{LGL;;8!Ytv7!9!gTdzfydBwv>nHTSkg{*%bL4e4y>MwQ%s(Kg`gmUfe}v<G6<i~8
z$-GD6om)iLP{T-v@$nY8ohOc^uuzxnPLyGNr4?BLcX1WC!w|aupEy{Trn}7EN^p-X
zBx#2rWTGL0I8Q7uC@U?cIN3lUSwud5B4xlx*r=W|D2$IG%gEvfbP;@%FJLqj*YgFb
zB5&2RMXftfM(F~^LpfPO=<2CQ`dYfEV~6{<ptctLD<1>@f53emu+zu}!=wjIuo=Zc
zXoePOg*Ir14(Nm~*aS8u%gNhh1zAa|$ttp%yhGNIwX0!D9S*{luvHib;WHEm*WJg#
zcgY8}IQZdH;b8CqDF6T9V6Ywt|DSL$NY|qy41`aOgYbEZgRnDMe;)^7HpM~Mjky$l
zlMOWX;kQ?;xL-H0H|$622KIq{$wpFB1^dGR<UO*v4he$~q3|)7dwL{<LtsHI62hSr
z2{%1bnUA4gy+<BcOwkUGfFohhOSX`$WZN=W0(}(jwv+e&n{d|v?Si$fg5#fX2glHw
zC~pW?Pk=i(j!qrlaO&-Y4S?<AD|PK_eH4Ol5+kFn=vBy3K>O(5hpiS<;dJ;?=!{%}
z;mfq$IwO~dq>9+!Bh4m!1-|+KJU%5m{|O#*!r<`+e3R@VyZ<A2EUpEQJx>K5j5Q1%
zE8shfZ8=;CtKllRntVn+Ctr|#%i$Wh7OsQq$(Q77a)O);?NX#CZHDiM=Wc;p;WoIP
z>?dE51LWXx3MZGqmlQ;V)b5OsNjct8AEi&>0mfDh_rlNM=kN=-4}J;v!>`C8a+n+;
z-;kr^7&%V9tvRi%1kvBa9~fIDJWozl!XL@$&?^ZEslPCLtKhHjA~{3OleBuRm*KVW
z3j7^jfmg{{a*lkr46bC1@K5S~H2FSsCZSnyNNu|6CGH@mfkZW9M2J3aH2HxfvFVfg
zJ}QACP$Xkpx|G<&%zY&&3W@3+MA75|vDG3wl29L!6vdKX$ZrpP45E0XdfX&Rpe8ls
zS8DPiN$U52*x2-G;(r)tQE~%W6P2})OH}r9xcH-~bcTCq*|1^m(srfpd^X*);}IRf
zXyioCGPbqIg_@wIs2NH@si-+>fm)(gs5NSXo*`GrRdS8|L9UZO$qn)sxk>&ex5#aB
zXDv!YZBaUE$6P`kPzLIVGEqC!31!h7|BKw^fQkbelEVQV2NF5Jav+7?;6Nq^o}>QJ
z{#jl#O*0q-QU7q)mr1u)^_?9WjE2x4(s|{TD4*OTw)*H6qN4Bsom`2Aae#R^G6I!R
zenTUX7Zsxt<U^y-XjF>)D8K=FkOMh@IDk38;{cxn5gdr*KqC$`ULB;Ho7$EijjN+N
zG?6iKKv2hZ91zx#9S0P3UO#2m|7e5!ADjN5ul&E!^*=S)1?#s=_3ZqA)Ac_!*#*%|
znt${P2cquN9h&__x~pFUbI}4yMQ9$H&jAq!qN~tCw1@*@4oDww{hx;Kg8$qd)LW@U
z%WDY_Eh8^+Af^hv4fb<D5^nw<qrAETUtQbq*GsQO@6y^t>(F|%fdjD|h~ohLz7f@c
z(;SHBfV_?ZX(Ru5{2#Xb4LbQ+YJ2KU!vEIsqwP#IdLINEwEPW;?GXBi&i%L{2R5Y3
z`Uvbqd&2R%iguH^98muI_$i0ii|j-D8CfOzk^>2q=qnDWL$eb#L3Ee{+FE`@-=L#(
z&yii`^;V&8=$<3o*rMZf^)N96K17dG=nMsk@V!cOmIL~F4E~-r`?WLcIRgEJehsJT
zXLJGm!T|#Zk~m;ohAyJt&?OEebHK_$;0z_}X9oX3e^RCBItNUZ=mrPO#P-N>*&%d`
zx^f%c2_JBT&sNy*QCwB*+2tIt)H#0_-J{ND&@Fcrx=W8{>JF<gz=-O_6rbpSicj``
z>SdyFByNNo3;R*U{y-_+M{~dty2qw<4WAC-C@iEfpPkdSERau+1afL;ETgwY4C$Ml
zQ}?~zmKaOv!5EIg5)QaH(4-2-V!AM!a-dmg2RkuHp8+e;o%_E3<_-HEelV=Qe{+@W
z_XYH3y*?ebGP2b;5$iFF4LAuKaWXbxGq!Lbl>^N=(1HUkInas&tvS$!1J7{aSq`MF
zW{lX*7#Rb0;U>5#ZiZ8EDv4Hbpe@B%AqUbq(2fJ`InaRv864<X^R=N6q~R=P@6re4
ziM!w)w9&v_aW?LTyK|ru2eLTuJO?^2$31Zl?uBzX(1inCIgrhPZXv&MUI(1V>|KV3
z;Cwuk15~Cr2L?RU=*Aw#whR~HVR$$PdT^j82XdC-5qKn~SG_n8Rv5}op4$!w@Yp9!
zt-#~(cn<X8Kwl2@BR00}{f@AJ(Ir7fcL)<2P7Y71F`5)O*uQpZ;K_K(pa&_WD<ppz
zy)~5~b?YU+KHSssEXKBiy7w}kfrsN)@T;{>4&=Zf>L&*Vb0BX8o(<RG*KvsUW$QRF
zgq+|&J_m-<_UuHMbM>?%Xh)Bz#&`l1JwqSa7Stwv@%{Yn>ftG(`5oNLSD0U+%Ma+9
zxLP-L(F0%wqi1YP6Q(uOmg&Ltrbobok%|6F(1ucfHvMIwKN?6$y8yY-F#5~DY_t-+
zhxVYo^u(VQH9A1g{14OW{fXAuue7!<(<A?D=sLQAZsMSrp73|Wv+*{3692`M@T5E!
zuL&=W*MpbC%jNaq_2UiT4dUhT@_7ZkF}$(7al8q<i9Eua#GA~U%A3x6nYWm?fw!A?
zjCYZDlP}^Y@}2x=_#OGr@w51y`Ca+F`F;8Q`2+cb`9t_G^5^nb@elA%@qgt1%>RXd
zk$)-3zrnxBzs0}9zZ=0s#79^oG9vOKyb;9_B@v?{Dk3IFyb`e>Vo5}G#IA^g5r-qb
zi8vl{BH~oUUy)3tI#L^%*qCi>Yn<D7VB;x`e{KASppif<Pz&?|gTN@T3hV->poyTL
zV4`4#V2<ET!92kN!6L!if|Y_*f_DUK1?vUDPX#9ge?*C*%u&swT1B;qN{dR5Y9BQy
zswnEks3}p?gwF^&3VRB3g?)tmg#(3yg_DFcgfoS&3g-$}2-gZX2|p6<6MiK;C_F6u
zMtDs4rwEE7M2$oOkys=V#foGihp4+~kSHJ;BN{6jCz>FdC?cXsqRFDEqUoZSMU_F(
zGSS<jm7-OmcSLJN>qYO1YDAkvTSVJLr=lB0tD=q3S<(5?)1ntg?}$DSeLnh%7>nb@
z3b9J878}J)#Vy1g#M$ERVz;<NJX-7*mx(8dXNg}Ehs1A)=Zfcx7mBOJtHo=?>%<$x
z8^!O5H;cazpA%me--=PjB*d6wf{qwhOw*VaF|A_S#5^0*GsYcL5;Ho+A5#|dX3WNz
zqcImGe2G$Glw?RUC7mSCOS(w1CEX=GCA}oY5+a!;St;2rIVw3WIUzYEIU_kI`Cb|;
zRZI0!gVZQBNmHfi(oAV5>GRSq(mv85(x7y*beVL6bffe=>1OFC(l3J21JYB{3({-S
z>(U$2o3Z_43t}r`C&tc+T^w5-yE=AFT;n)toHouF*EB98u4~-bxEJE8<2J>8825SH
zzPSBy2jY&$oryaicUh*9S!L<6_Oc9FrmU0fd07`(wye9Xr>vLEBO56zmic6(Wqw(i
ztXx(h8!vl77L+ZLy)O%%jR)~b@txy+@vp|OjsGJ4aQxBu<MAir&&U53e>wh2{I&S&
z@i*j19w~1ukCMm8rSdp=ygWtTM_wrR$VbYH<)!j~e2jdoe6l<wUnE~FUm~xPua|F@
zZ<TMCe<0r_-y`2E|6IOLeqCWyJg4Zc7^E1bC{>JCOj1l!%nm9RD>f)LD&AM@R(!2E
zsyMDVp*XAfPH|rGqvE3CmJ%tIO0BZFvaPbcGDDfE?4}%{^eRh~vy`tXL&`UlbCvUz
z3zdtNOO#uc+m#<EKT_^c?o{qp?pGdC9#I}u9#{UT{8{;n@}lyl@|N<B@~*0pN~V&l
zl&S=kS(T;=rmNbkGE|wWPO9fsT~yhs?y8=uVJeSmq^eluQ;k;nRb{GjRfTH2>IKyT
z)i%{>)x88ZAuFLcVP?WR37;i=op2=KXu|P??-G7Z_$}db!j*(;3D*;DsF6BS-B=x^
zj!{e1aq4(=in@=wQ0-BVR2QpD)dBSw^;q>Z^_-x3p?a};iMmo<tzNBOqh6=pp#D}P
z(AYGon)aGpO&`q=O|gb(CTV79=4lpdmS`$9D>T)b)tWV$_cgmUr!?Pb{?-b#2CY$R
z(pt1OtwZb5w$i3))3xoj8QLD&9Br<)kG4=-q#dpup)J!+(oWV+)lS#Gp?yocR2!_)
zF4wNmuGhY+t<i4MZqaVj?$my%J*NF#dq>C9Md%vo1UjKkrjzTGx&)m@r_-hB2Iwa0
z=IWN~HtDwLw&~v2eW?3b_la(oZjbJ$?zrxR?v(C~?wsy>-4D8-bQcn3iJ6K1#Hz&o
ziT~0&^@H^z^(FdIdcVF*U#_1K)X&k+*DusB)-Tbo(bwoV>9^>&>38UN>UZlu)qkcx
zsz0y4p})sQu~IgUjb|0Cj@7dU*2tRJCTtqpmQ82dvl(m;winx*?Z*ya2eC!$NVb^u
zv7_0E>=bqy`w}~YeVv`dzRAvG7qH9Owd{8G6LuH7huzBtzhV!vhu9<RQT76RmAz|F
z7*qzeL2F1fu!bZ<vcYVy8tewAp^2fHA=}X1(9@7>=xgY27-Se?C@>TmJO;19XBchp
z8(uZMW7ujqZn&2eljKNhpVTkOpEM<DYtn(F<4GrzPA8pB`Yq}Aq^n8SlWrv4H1dp*
z#>Pfr&?q)aj9O!gv4yd<@mXWKv4b(wm}Tr@>}Kp~9A+G0^cqWyql|uInX%khVVq!`
zXe7qP#t)3=l3}tjxl8h><XOq<lJ_MaNj{c*BKcJEkI9#luOwefzMgy|`KF0yYHSjk
z#HKit+@vz8O|4CXOe0J_(`Zw`RAHK63QjZ;(=5|G(|prHQ?+TmX`^YAX{+gD(@xVK
z(_Yi(rrTzNxuZGTJiuIH9%ZgDPc_dsFEm%1*P7RxH=4JYx0^pOe`MZoK4Cs>K4(5}
z{>gm7e8U1Pd`lyX#G<fhEXfv&#b$9>+E~&o>6Q+bOiL$A4@)mgZ%bc`J81D*e3nv6
znPq|{XqjZ0Vwq;Cww$vzvdXLqYl2m4)msf#r?sUu-I`_XV$HP<wB}n&tfQ>~Yq@ot
zb%J%8b+&bZb+Pq?^}O{@>m3`<Cb7lals2_ZZ%eY7Y!=%v+j84l+h*G~+fLg)+gG-e
zwkx(jY&UFw+wRzc_w3Nlvq#zmc9EU6C)rJQi``~-+MC)_?JezX>}mFNduRJl`*`~t
z`%3#q_QUqm_G^yDjs%Cp;d7KZW;kAVEOxALtaPk$Y<7I?*y-5g_{_1-al~=Val&!h
zanA9*<F-@gY~n0*j&P24`kfP;FFL0>UvkcLzUo{UbXGavc2+yzac*>Oa&C3L@BGmD
zlPlJh?#gm?cJ+1TxrVyjuHi19tJGEI8tWS8deQZ=E96?3vN~mL%I1{aDf?0mrJPOq
zE#>!=Ybk%G+)TNhayM0wDoPcnN>gR2@>FGNLTbCzqSV=`+f#R?ewq4B>han$7>54h
Sz%X(2jhEKlsQ;h(^Zx)%G7FXf

delta 6089
zcmb_fd0bP++CJ}076}R24>=*{Bqs?8YCycoRa_7hRJ2kQ#kC?rL=*v8+%*%ed+V0g
z+Ip=9+&5HQT6e8W>smppt!p>yUhC3o)%G3;*!I@@{l4$_`|?N5WX`+I`#keZ=IEqV
z!{%i|<N1RRc$z~D{1aM0Yv>BSp$`mz!H@+xkPE}05Jo~NjD>OFfhjN(-h#Jb4$K7~
zya$V6Ijn;UsD!Ps4L*iX;1C>!BXA5phci$GU%^GV1ef6od<);f4Y&h$;SoH6=kNl4
zLkNW+B~l@^2Wb$8%*cXxWJTd97PUgHQ5)12#i4d69waCMbwZs{H`E*TL48p_)E~Lg
z5Ht)8M<dZFM35IvMsK0F(HyiMZ9p4Q1=@r*qb;ZsZAIJAcC-V1gg!=l&?o3KRE^G}
zbLb276}pP9p&RHX^4vnV(H(Rb{e*r&Pta5J4E=@?Zh+;O#-Z4N8EnQDY{yO<iKFm8
z@IP@JZinM>2iy@4#2I)H&cuUp7S6_QJOt<9p*R;0!^3eN9)a_50WQLmum=<D#gp+A
z{3f1?XXAJALi`?Hgx|*>81Qnu0<Xkt@kYEC@5B4?0eldDf{*wja9pE9Bs@c9PmFDv
z*gQ6=d1Opd)9A?NO_O3G+jkH~9h-M((J?V0sbh3(d*3{K$<`q@x?}t1(Fu|NNJwfH
z**qyBDKa)GwpnD$*yb$~lVV!NG)=0UD>?{41E@h%CNUGPvY+G_XncbU^Ky$zqNC3O
z!XmMOvG^9tTZxxT<SLzSbc1dZ{gWsudfj)dK}(PRN#yART(g8D`X_C-#(h*~WXr-#
zHmdGp+iwqy$~dzveq>;5i=Q>4cI4-)qz$aWep|n81*3A^>F%OpH`RbrQ(;sT)t2f?
zrBc19epEI!gc?Z|Q)8&v)CW{KwVGN>RZyF$?bK&f>;>v;>K1jEx=%d?1Y!t*P+))q
zOCT45z>})0qwW_4jVo=k?MPTjcW4w{c~yQIg5D*I$xgD1?5^Aq@-v9Xk%8nL-xgJ_
zgQ}(!R0ySn#?XXvm4gc+A&LwlnPhM|L<`C9k}Q(ui&eWiWT=#hWAigd<Yx8E9Gsk=
z?H*HA>)8@o`5~5Mli?Sj4YY+gXeY#rhXiO39Uu{spd)k=M#<2{w@_UXF@}sH6mgTW
zWDF@GqrZUHpc|wJF0Vr>bcY_020ft{r29r_@`7?mAt@$9NS^N-P0RLuYf|+iL&@-J
zcmoCsJ{i<q$n2M#?anXB9g^!V>Q!49$t7uI*q>ToMNOb4LN>U4gS0#zLJ{F<w%5*5
z$6;t0b(|tv&+maxH4GOb=fMcbha}%6EeE50&$PXKFLVm7$sce=jmav=b{7^E3=2dr
zf@0q!9gWMN#5X}_5|4t>Fvhn;SF9Tk6Z$8n_w1OP=T6Nm8Cnh#VUo|TcVGfuUpIXu
zO!ke}Hwk`I$U0SM*K`=++ord8X2I-UDQUfWyjBLYD3YNH%_<lXm04Jr=MJQfs>$un
zD#=i_=u=ZlRPA@O)WB?7X<=bOQAt!%c5X>QQDQ+>=?I}of3^8rhvvcj43#c9F-h?9
zMHoYb#Vqi#Mzi)E>Zl*yCF4n46)Y0!d>=mWy>2vlCJ^7NQU4H@)}t=qJc>*q6JL$^
z3Rqc(_*ycVOsd1%8{pRZ8o)OY&mVwqssWskI($9#d+XKUk$h4>UQ&D~?5&~rF4zrw
z$eUy;nN|+_U_Trn)5(0YfVeVLuD`S}(7H5tp3r1>c6|$9E6B<$$t}n)7R)`buum;=
zkIF45E$*3Fl;bW5#ORQhSuEH)USXaQnESJJVC_e1*8VA(L581&;{qLPNO=NI!YMf2
zx45>Z+yZ$%nN4PqnPgsu>Lp1%uOz9hM#s8C)Qb8YUkzVSt}-|a=g3>+?J_tI7swnk
zm$=dcHKzwk%1~+kUg6(}a}};-sMvsETpa`dvti}%HGES;<T|_mVpg+>n!GY=edXW7
zb;`AD8F2+R-c7jW`<gQdT)pkP%0+qptS9&2$2xXBBp;B4b?kaS(Ba259sZfT_XoS4
z*0O8Sf2ha*f?Nor29#?#5+N~*BuGmBMV62c$<pO02+2?|l9Od*C8;2rd^^nX;aX&<
zG1ehHqERUElQL3HmM<5S{4NTk97G`$u)=4ujBiz2D6&DTWkQhwsYVVYNcC#uL=mVV
zYJ?gi7m7qtWEELW){wPi9a&E{kd2jxEq)l(9wkyPKk7g>`%x0vQp0hzAVq1yDOi%8
z>mHq4;vP{PNRmt)Ekj*US5iqnB60P}Qcw?yE=RAURMeepCELjMawMW0sF$!pCE4LS
zVr}M0tv!0`JqDmbfAbIv9$7+1l;mR)Zi}Bh=r0~QXlMXWRsCK?c_{y7-34S%4b;LZ
zg^FrwEJh_{FFEkCMh_Z|#{Vtl1R>=lvQJ34pM>`fNSYvow)mMh{*rtOn*KN68G`RD
za!~O7q~>plQt(c64=&BgaTg^Nxif9?1NQ$ZhDV9!q9v4T1Dc2CqXo!^-a+r8h3GxB
z2)&O!K#S48$YFAX93`KU&&V-yoSYyh$tiN0d``}6Kp&!|Xc_Vg(3hj-Xa!n{{Ae{=
zBha9VRFiMXb%6{w$W3yaJSW$^5aI=;P?!Lup@%z5ko2U=iT2*$K|5>MoGcuvFNv}j
z?H8H|UC3xZIzY}6S3N|B(2<%Kg0UYRCFlNlaSWXjBoZA*C(udq1vyVHl%vz=b99D$
zNxmlE{0|c8`L7xo5QVzU9*~y*Cy7Mog(ag4<SRiUJ@p!iE}~1q(S4d+A{PbypBK<Q
zYT@Pj#ea>y6Lb%KgT5t~$(1tnJ-SY=l5780-TM!Psyk=vliWi;1}I%W@c=!dXg_*L
zzVoBU<a^)shMWieN`9!7F!UU~NKZ*iDb33(L(eG^Ap7sa>L@iqF9F3Eiv`?j=KNSf
zZq@Ay93&jhwTAV(7Avq?AT<ubN~|Jx$X#-;9BZ%^>&TDfA^D|-)LgP}cB5$?BQ^;k
zaTvMp$1M4Yxc)5dn5UH3ifz49(xOUoN4RTy+4!41KpxcAjl;1+s5>#U#9fBNDN?ss
z9Dy6v1Z_wj`Eg_N_^&~QkWFwjZrWD}S}ZLo%FWLqKl_$6Zl8pk;pW0_OG)ciT9P?9
z&z)BLvRs&sp-7*Uw7~EBBrR|&0Y}^t$C4-HX&G*f+mK($Ghc*jlBcHb1Z=CT_h?U{
z-rBV!*3Csv?0=FxsE^bM3mUf;cgD%M3+{?v!`*NSejTUc?&Jmejr{Hf$_wBH<OS>n
zkr%{XkgTN~xF_YH?6^1XgZtusxIZ31lwOb$rH&}P(7+2pUXXbq*b8zmC@SM3vmp)_
zQb(7)lrCJ1#|S3@F2SXE6dvsbl^4`r(0D<+9FN80@OV7I3py|8y+C^*)ORgvQ3pJY
zI$DmW;~99S7YttDykPqy;#+v0u!Zs4cn+TH1;z_TFNBrj`FH^y>jje+SRtTqSCjV=
z@M665Ri?|ZAD4N->;;P#c;d3PyI-qzR2F3kN0g-suM*n38n3DJMKdCgH9&=Rc>NnM
zkrNn^S&rA?4HOCRBeTBO6?i-4S}Byb8E?UJ@m9R8wn)1d!i74$;P8TTCEkI8@yB?l
zaBvFEiy#$VXy}DT!ueTIBSBU{j}x*=a!2KsjP2n|jnVkp#>}Y2{7@afZ7VO|ArA)j
zEXd9rYsoCJG;P+Zd5m!XVkj%+qMA~zsCHC$DxDfY4HWLodj-L(MppzSxFuYW@1ck2
zv2aCxDqMzJ;6&U@0JyIJ?i<1tI8(U(x&@@h2+&LruDe9I>b{Am2~aHa;0k<IWDzBc
zhKr_)%0%U&{h|Y+Q=+d$--^B${UEw2x-GgZ`cd?g=%H95ZXlM4<>C;rN~{s<#I)ET
zHi{#~@#3E19PxPZ4DpBJ&EkFH6XJ8?^WrbX7sZ#w*Tpx)x5RhE_r&)lT8UE<E6I@L
zNlGQ7C1WMyB@-o{X_6U|S(3LTb0qU5t0cQ5XC*&Mo=aXxev?wtAgNBuN*hU=NLxzN
zq=TecQnz%dbeJ?xI$b(Xx<OhY-5k_8sC&@3AaBrGnNntuMag1h?PZ;0$+E7pR9O#M
zPg%NblB`^|N%pa9mu!!0pX`9_nCyh?l<ad^mF%qSwnz4Rupziva7u9h;DNz|g0q6%
z!8yT`gJ%b?4qh9)UY;o*CLb*yC!Zkq$i4C@@>TLp^3C!}`EL1fd6oPt`M2`>@`v)r
z@+b0N<<AvHg;U{DL@A;bF^U$7SVe0^nxa%OS@FJNv0{m0slu-)SFBL1Qmj#|Q*2OF
zD2^yRpDK<iPAE<(K37yJ&MLl8Tu^+axTLre0wGZ$@gZG9@<XPDtPeRD@_oo7Wdo&N
z*-+U=8K;a_wpVsl_Erv14pkN_OO>;fKIKB?BIO6lRm!c(?aGgoJC(bYdzJf@CzYp_
zXOz{-bIS9|FO?USKdQtkt;(!wr%F(zsCs!+y;Xfx{Z)fi*{UI`p{ijjk7|KxxoU%I
zlWL1<tLmKUC$(PfR41wXs@>`->Z$7K>Y3`<>bKQ%)$`Rp^?LO_^(pmr^;3;r6RKe}
zVH#Fr*6^A%%>Ye?CR3B8Db$SDcr{ZrQ#I2y3p9&0J2m?>S2RCp?r0usk=7HUHE4}m
zla|vi()zVKw7a!c+Kbxj+8f$iy3V@px;J#$x<cJ#-E7@<-7ejA-9z0oy;L8h57sO6
zwBDrW^{w@#dZM4HU#4H7->pBa|5SfWe?oswe_#JV|A^Mpp)^B>(JXDIdD=#Y({Xe>
z-JVXQJJOx$E*?6KPN)0O{pcJzmmW@!pvTZ&dJa90UO>M?`{~v6T6#Ubk={n{pg*Q}
z(R=7Sp<$tkq1{4LLwkhw40VSVgpLd?4lNBG9r{z~uLh|>ZU`}`40=PTfiZ*`tcHe$
zI770bhoQ(Y*6_Ze!f?oN#!zLbHk>nDG5l=sJY%#>I1|UjGwqo~rX$mt>B6Kj=}aG{
zACtr6GQ*h>%oxVY%wgs+3z&BpKeLuu&unBiF<Y2j%pPVRbAb7TIn115E->FR&x{R>
zYNOVuH-;J+qt$3PI*bv<Mn;#hi!sMI%UEt)Z`@$4Fzz;<G@dq|F;;tw=Zxo#Um7nO
zFB|U}?;9T&9~pl(J~94kd~W<Lj0%ei8yGe_Y-iZ_CcUYXX_RS-X_{$<X}0NY(_B-z
zX}xK)snWE~w8M1Bblh~(blP;rbiwqM>5}P+>6+=D=@}cshO&0HF&oJ?VVklo*;Z^D
zHja&Fli75(H`|Bx^kWCGxojSr&yHk^*-~~AJB6LfPG@Jb3)v;?Qr6FwvuoM)>_&DI
zyM^7&9%if9FWHOiW%eq2oxQ={V(+l`IEoA6Xs#*OjEmt~aIsu#t}WM&OW-<iNn9r`
znd{08;f8X<xI8YOE98o}5^fYXh8xFC^l*fm%)QAi<#uzQaW~B>v(?<roMs+oe$%|r
z{F(Wh`KI}f`JVZ{`GtkDAdA={wFFsc3u6hha2AWjYH4Emr=_K(m8FfPgC)t*$&zg8
zY8hu)W2v%Sv|O=VvwUNDXnAb;#q!khj2H20p5_g_kvH=^Z{x#xkBe`{cjnXhp?oPn
ziXY97<)`s8`Puv&ejdMoU&gQFH}PBeUHn1*DE~QM&7b4X^WX75@HhE8{5}3Y|CE2u
z|7NAE3aidaTMbsDmABfg;Z~=$p|y*3vUQ#HBkL~f9_xPVLF*ywY3l{+HS105ZR;cJ
zGaF@7cx)=0#-_K0+8CSN7HMl?i?xlid2I7-i)?<|Mq8zAn{9_}w{5R&zwMyycY7Oq
zl0C(qYVT_wY|pljv`@3ou+Or;WuI$bV1L)X$iCSAq1|uaZvV)>%f83H&wkK;*#4>g
zxc!v<jJ?`^#r`-vB-|O^D!hC6knqCrso|a_;T7Qr9LUkY!8yVm(T-S0D@PkgvZIHi
zm!prPzhj^y$1%(?!cpibc9c5iIMz50Ieu}xaEhD~r_xC~8K=o<cJj_BXN<F@v$ZqM
zndI#3?CMN$raH$uS2?Slmz-Cex1A51kDX7P&mvHSIHEyBaD*a)j$k7k10$kbZC&xM
zWLIz3K$qK9<np*CyQaEkxMsWNxaPY)bopK7u9dDeu63>rt_s&#*V9N_WVgul$c)IL
Vk;4N2Fc1nn@zKDu{yTE)zX8SqSoi<{


From 0957e6d8204e1c61daad49db7c77554837dffa63 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Thu, 18 Jul 2024 10:26:48 +0700
Subject: [PATCH 10/18] Final: Enhance app functionalities (#196)

---
 index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/index.html b/index.html
index 016c359e..73683095 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,6 @@
     <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
     <meta name="yandex-verification" content="82af90b194a42a28" />
     <meta name="referrer" content="no-referrer-when-downgrade">
-
     <!-- JS and CSS files -->
     <script src="index.js" defer></script>
     <script src="/MovieVerse-Frontend/js/settings.js" defer></script>

From 0dfe8398b928da4ce959948cb99b5f0a589d82b2 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Thu, 18 Jul 2024 10:32:16 +0700
Subject: [PATCH 11/18] Final: Enhance app functionalities (#196)

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 73683095..9f67f064 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
     <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
     <meta name="naver-site-verification" content="2b6efdfb68cee6ad6fa4227d38a19b414e819bb7" />
     <meta name="facebook-domain-verification" content="uogl1tjp9660kf4kq988ayjhslpxn1" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, movieverse, film" />
+    <meta name="keywords" content="movies, movies verse, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, moviesverse, movieverse, moviesvers, film" />
     <meta name="author" content="Son Nguyen Hoang">
     <link rel="canonical" href="https://movie-verse.com/"/>
     <meta name="robots" content="index, follow">

From 1bba2f1be819121c1a5c90f0ec4e344fe180bac6 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 22 Jul 2024 19:43:43 +0700
Subject: [PATCH 12/18] Final: Enhance app functionalities (#196)

---
 MovieVerse-Frontend/html/actor-details.html    | 2 +-
 MovieVerse-Frontend/html/company-details.html  | 2 +-
 MovieVerse-Frontend/html/director-details.html | 2 +-
 MovieVerse-Frontend/html/movie-details.html    | 2 +-
 MovieVerse-Frontend/js/actor-details.js        | 4 ++--
 MovieVerse-Frontend/js/director-details.js     | 2 +-
 MovieVerse-Frontend/js/movie-details.js        | 2 +-
 index.html                                     | 2 --
 8 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
index ef6b3eff..ad563777 100644
--- a/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Frontend/html/actor-details.html
@@ -465,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Frontend/html/company-details.html
index f0b6c77c..afb9de67 100644
--- a/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Frontend/html/company-details.html
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Frontend/html/director-details.html
index 55acbdc4..14778aa6 100644
--- a/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Frontend/html/director-details.html
@@ -820,7 +820,7 @@ <h2 id="director-name" class="director-header"></h2>
     document.getElementById('director-image').addEventListener('click', function() {
         const imageUrl = this.src.replace('w1280', 'original');
         const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Frontend/html/movie-details.html
index bfc4fb00..c50bce4e 100644
--- a/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Frontend/html/movie-details.html
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
         document.getElementById('movie-image').addEventListener('click', function() {
             let imageUrl = this.src.replace('w780', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Frontend/js/actor-details.js
index 0035b2e1..f8b7b542 100644
--- a/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Frontend/js/actor-details.js
@@ -325,7 +325,7 @@ async function populateActorDetails(actor, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
@@ -808,4 +808,4 @@ function applyTextColor(color) {
         .forEach(element => {
             element.style.color = color;
         });
-}
\ No newline at end of file
+}
diff --git a/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Frontend/js/director-details.js
index 4f8daa13..ce289989 100644
--- a/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Frontend/js/director-details.js
@@ -317,7 +317,7 @@ async function populateDirectorDetails(director, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Frontend/js/movie-details.js
index 5d9e8acf..1f3c85b8 100644
--- a/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Frontend/js/movie-details.js
@@ -1427,7 +1427,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/index.html b/index.html
index 9f67f064..1b66b341 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,6 @@
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:image:alt" content="Movie reel and popcorn, symbolizing The MovieVerse as a guide to the cinema world" />
     <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="naver-site-verification" content="2b6efdfb68cee6ad6fa4227d38a19b414e819bb7" />
-    <meta name="facebook-domain-verification" content="uogl1tjp9660kf4kq988ayjhslpxn1" />
     <meta name="keywords" content="movies, movies verse, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, moviesverse, movieverse, moviesvers, film" />
     <meta name="author" content="Son Nguyen Hoang">
     <link rel="canonical" href="https://movie-verse.com/"/>

From 636ca28fbdff0d48981a9b6a0730b2269594adfe Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 22 Jul 2024 19:49:27 +0700
Subject: [PATCH 13/18] Final: Enhance app functionalities (#196)

---
 MovieVerse-Frontend/html/notifications.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Frontend/html/notifications.html
index 5aeeaee8..e34b5aad 100644
--- a/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Frontend/html/notifications.html
@@ -354,7 +354,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
     </nav>
     <main>
         <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
+            <h2 style="cursor: pointer" id="newFeaturesHeader">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
@@ -370,7 +370,7 @@ <h2 style="cursor: pointer">New Features</h2>
             </p>
         </section>
         <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
+            <h2 id="newReleasesHeader" style="cursor: pointer">New Releases</h2>
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
             <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
@@ -385,7 +385,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
             </p>
         </section>
         <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <h2 style="cursor: pointer" id="tipsTricksHeader">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
@@ -400,7 +400,7 @@ <h2 style="cursor: pointer">Tips & Tricks</h2>
             </p>
         </section>
         <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
+            <h2 style="cursor: pointer" id="popularActorsHeader">Popular Actors</h2>
             <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -408,7 +408,7 @@ <h2 style="cursor: pointer">Popular Actors</h2>
             </p>
         </section>
         <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
+            <h2 style="cursor: pointer" id="popularDirectorsHeader">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -495,31 +495,31 @@ <h2 style="cursor: pointer">Popular Directors</h2>
             }
         });
 
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
+        document.getElementById('newFeaturesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('newReleases').addEventListener('click', function(e) {
+        document.getElementById('newReleasesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+        document.getElementById('tipsTricksHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularActors').addEventListener('click', function(e) {
+        document.getElementById('popularActorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+        document.getElementById('popularDirectorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });

From 246785a6db8937ea1e7497d8845dde2faf084cab Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 22 Jul 2024 20:09:53 +0700
Subject: [PATCH 14/18] Final: Enhance app functionalities (#196)

---
 .../www/MovieVerse-Frontend/html/about.html   |  29 ---
 .../html/actor-details.html                   |   3 +-
 .../MovieVerse-Frontend/html/analytics.html   |   2 +-
 .../www/MovieVerse-Frontend/html/chat.html    |   1 +
 .../html/company-details.html                 |   2 +-
 .../html/director-details.html                |   2 +-
 .../html/movie-details.html                   |   2 +-
 .../html/notifications.html                   |  20 +-
 .../MovieVerse-Frontend/js/actor-details.js   |   4 +-
 .../assets/www/MovieVerse-Frontend/js/chat.js |  17 +-
 .../www/MovieVerse-Frontend/js/chatbot.js     | 232 +-----------------
 .../js/director-details.js                    |   2 +-
 .../MovieVerse-Frontend/js/movie-details.js   |   2 +-
 .../xcschemes/xcschememanagement.plist        |   4 +-
 .../ios/MovieVerse.xcodeproj/project.pbxproj  |  36 +--
 .../UserInterfaceState.xcuserstate            | Bin 16199 -> 16184 bytes
 .../www/MovieVerse-Frontend/html/about.html   |  29 ---
 .../html/actor-details.html                   |   3 +-
 .../MovieVerse-Frontend/html/analytics.html   |   2 +-
 .../www/MovieVerse-Frontend/html/chat.html    |   1 +
 .../html/company-details.html                 |   2 +-
 .../html/director-details.html                |   2 +-
 .../html/movie-details.html                   |   2 +-
 .../html/notifications.html                   |  20 +-
 .../MovieVerse-Frontend/js/actor-details.js   |   4 +-
 .../ios/www/MovieVerse-Frontend/js/chat.js    |  17 +-
 .../ios/www/MovieVerse-Frontend/js/chatbot.js | 232 +-----------------
 .../js/director-details.js                    |   2 +-
 .../MovieVerse-Frontend/js/movie-details.js   |   2 +-
 .../www/MovieVerse-Frontend/html/about.html   |  29 ---
 .../html/actor-details.html                   |   3 +-
 .../MovieVerse-Frontend/html/analytics.html   |   2 +-
 .../www/MovieVerse-Frontend/html/chat.html    |   1 +
 .../html/company-details.html                 |   2 +-
 .../html/director-details.html                |   2 +-
 .../html/movie-details.html                   |   2 +-
 .../html/notifications.html                   |  20 +-
 .../MovieVerse-Frontend/js/actor-details.js   |   4 +-
 .../www/MovieVerse-Frontend/js/chat.js        |  17 +-
 .../www/MovieVerse-Frontend/js/chatbot.js     | 232 +-----------------
 .../js/director-details.js                    |   2 +-
 .../MovieVerse-Frontend/js/movie-details.js   |   2 +-
 42 files changed, 125 insertions(+), 869 deletions(-)

diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html
index 87048c73..5a808f24 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-
         <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
-
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
-
         <div id="button-container">
             <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
         </div>
-
         <ul style="overflow-y: auto">
             <li><a href="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">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">
             <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 specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/actor-details.html
index e96b40fe..ad563777 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/actor-details.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
@@ -466,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html
index 17112431..9b02e879 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html
@@ -341,7 +341,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
     </nav>
     <div>
         <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>150,000</strong> monthly active users!</p>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
     </div>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chat.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chat.html
index 438da315..4054ba67 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chat.html
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/company-details.html
index f0b6c77c..afb9de67 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/company-details.html
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/director-details.html
index 55acbdc4..14778aa6 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/director-details.html
@@ -820,7 +820,7 @@ <h2 id="director-name" class="director-header"></h2>
     document.getElementById('director-image').addEventListener('click', function() {
         const imageUrl = this.src.replace('w1280', 'original');
         const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html
index bfc4fb00..c50bce4e 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
         document.getElementById('movie-image').addEventListener('click', function() {
             let imageUrl = this.src.replace('w780', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html
index 5aeeaee8..e34b5aad 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html
@@ -354,7 +354,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
     </nav>
     <main>
         <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
+            <h2 style="cursor: pointer" id="newFeaturesHeader">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
@@ -370,7 +370,7 @@ <h2 style="cursor: pointer">New Features</h2>
             </p>
         </section>
         <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
+            <h2 id="newReleasesHeader" style="cursor: pointer">New Releases</h2>
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
             <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
@@ -385,7 +385,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
             </p>
         </section>
         <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <h2 style="cursor: pointer" id="tipsTricksHeader">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
@@ -400,7 +400,7 @@ <h2 style="cursor: pointer">Tips & Tricks</h2>
             </p>
         </section>
         <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
+            <h2 style="cursor: pointer" id="popularActorsHeader">Popular Actors</h2>
             <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -408,7 +408,7 @@ <h2 style="cursor: pointer">Popular Actors</h2>
             </p>
         </section>
         <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
+            <h2 style="cursor: pointer" id="popularDirectorsHeader">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -495,31 +495,31 @@ <h2 style="cursor: pointer">Popular Directors</h2>
             }
         });
 
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
+        document.getElementById('newFeaturesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('newReleases').addEventListener('click', function(e) {
+        document.getElementById('newReleasesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+        document.getElementById('tipsTricksHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularActors').addEventListener('click', function(e) {
+        document.getElementById('popularActorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+        document.getElementById('popularDirectorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/actor-details.js
index 0035b2e1..f8b7b542 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/actor-details.js
@@ -325,7 +325,7 @@ async function populateActorDetails(actor, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
@@ -808,4 +808,4 @@ function applyTextColor(color) {
         .forEach(element => {
             element.style.color = color;
         });
-}
\ No newline at end of file
+}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chat.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chat.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chatbot.js
index 6c17c9b3..30ad3a1f 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chatbot.js
@@ -268,63 +268,6 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
-function updateUniqueDirectorsViewed(directorId) {
-    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-    if (!viewedDirectors.includes(directorId)) {
-        viewedDirectors.push(directorId);
-        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
-    }
-}
-
-function updateActorVisitCount(actorId, actorName) {
-    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-    if (!actorVisits[actorId]) {
-        actorVisits[actorId] = { count: 0, name: actorName };
-    }
-
-    actorVisits[actorId].count += 1;
-    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
-}
-
-function updateDirectorVisitCount(directorId, directorName) {
-    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    if (!directorVisits[directorId]) {
-        directorVisits[directorId] = { count: 0, name: directorName };
-    }
-
-    directorVisits[directorId].count += 1;
-    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
-}
-
-function calculateMoviesToDisplay() {
-    const screenWidth = window.innerWidth;
-    if (screenWidth <= 689.9) return 10; // 1 movie per row
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -352,50 +295,6 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
@@ -419,41 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -468,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -552,68 +383,9 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    // if (lowerMessage.startsWith("do you know about ") ||
-    //     lowerMessage.startsWith("tell me about ") ||
-    //     lowerMessage.startsWith("what is ")) {
-    //     const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-    //     return await fetchMovieDetailsFromTMDB(movieName);
-    // }
-
-    // if (lowerMessage.startsWith("show me details about ") ||
-    //     lowerMessage.startsWith("i want to know more about ") ||
-    //     lowerMessage.startsWith("details about ") ||
-    //     lowerMessage.startsWith("search for ")) {
-    //     const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-    //     fetchAndRedirectToMovieDetails(movieName);
-    //     return `Searching for details about "${movieName}". Please wait...`;
-    // }
-
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
@@ -626,9 +398,6 @@ async function movieVerseResponse(message) {
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -688,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/director-details.js
index 4f8daa13..ce289989 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/director-details.js
@@ -317,7 +317,7 @@ async function populateDirectorDetails(director, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js
index 5d9e8acf..1f3c85b8 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js
@@ -1427,7 +1427,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist b/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
index 2c8b6bbd..abace984 100644
--- a/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
+++ b/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
@@ -7,12 +7,12 @@
 		<key>Cordova.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>2</integer>
+			<integer>3</integer>
 		</dict>
 		<key>CordovaLib.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>3</integer>
+			<integer>2</integer>
 		</dict>
 	</dict>
 </dict>
diff --git a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
index e10f5ad1..a1a529d6 100644
--- a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
+++ b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
@@ -8,7 +8,6 @@
 
 /* Begin PBXBuildFile section */
 		0207DA581B56EA530066E2B4 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 0207DA571B56EA530066E2B4 /* Assets.xcassets */; };
-		0697E58733504E4B9E89AC46 /* CDVStatusBar.m in Sources */ = {isa = PBXBuildFile; fileRef = 95B9657E7DAD40B1A57730D3 /* CDVStatusBar.m */; };
 		1D3623260D0F684500981E51 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 1D3623250D0F684500981E51 /* AppDelegate.m */; };
 		1D60589B0D05DD56006BFB54 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 29B97316FDCFA39411CA2CEA /* main.m */; };
 		301BF552109A68D80062928A /* libCordova.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 301BF535109A57CC0062928A /* libCordova.a */; settings = {ATTRIBUTES = (Required, ); }; };
@@ -16,8 +15,9 @@
 		302D95F214D2391D003F00A1 /* MainViewController.xib in Resources */ = {isa = PBXBuildFile; fileRef = 302D95F014D2391D003F00A1 /* MainViewController.xib */; };
 		4E7CA2B6272ABB0D00177EF9 /* config.xml in Copy Staging Resources */ = {isa = PBXBuildFile; fileRef = F840E1F0165FE0F500CFE078 /* config.xml */; };
 		4E7CA2B7272ABB0D00177EF9 /* www in Copy Staging Resources */ = {isa = PBXBuildFile; fileRef = 301BF56E109A69640062928A /* www */; };
+		5FFC3F37AA7C4EB09DC474FD /* CDVStatusBar.m in Sources */ = {isa = PBXBuildFile; fileRef = 899EE768E3C34C8A9180DB8F /* CDVStatusBar.m */; };
 		6AFF5BF91D6E424B00AB3073 /* CDVLaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6AFF5BF81D6E424B00AB3073 /* CDVLaunchScreen.storyboard */; };
-		792F6787FC6A2823F75800E6 /* libPods-MovieVerse.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4B0847137D1380BC1673EAB1 /* libPods-MovieVerse.a */; };
+		DE2D9157EB4568D8E3027BB9 /* libPods-MovieVerse.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 67D1FBE10E1C62D022DA813C /* libPods-MovieVerse.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -61,7 +61,7 @@
 
 /* Begin PBXFileReference section */
 		0207DA571B56EA530066E2B4 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
-		1C20D73F0C87CD0D33E21AAF /* Pods-MovieVerse.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.debug.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.debug.xcconfig"; sourceTree = "<group>"; };
+		0D4D48181E26272771737167 /* Pods-MovieVerse.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.release.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.release.xcconfig"; sourceTree = "<group>"; };
 		1D3623240D0F684500981E51 /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
 		1D3623250D0F684500981E51 /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
 		1D6058910D05DD3D006BFB54 /* MovieVerse.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = MovieVerse.app; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -75,12 +75,12 @@
 		3047A5101AB8059700498E2A /* build-release.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = "build-release.xcconfig"; path = "cordova/build-release.xcconfig"; sourceTree = SOURCE_ROOT; };
 		3047A5111AB8059700498E2A /* build.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = build.xcconfig; path = cordova/build.xcconfig; sourceTree = SOURCE_ROOT; };
 		32CA4F630368D1EE00C91783 /* MovieVerse-Prefix.pch */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "MovieVerse-Prefix.pch"; sourceTree = "<group>"; };
-		4B0847137D1380BC1673EAB1 /* libPods-MovieVerse.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-MovieVerse.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		3D4AAB9E905347F5A465A054 /* CDVStatusBar.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = CDVStatusBar.h; path = "cordova-plugin-statusbar/CDVStatusBar.h"; sourceTree = "<group>"; };
+		67D1FBE10E1C62D022DA813C /* libPods-MovieVerse.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-MovieVerse.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		6AFF5BF81D6E424B00AB3073 /* CDVLaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = CDVLaunchScreen.storyboard; sourceTree = "<group>"; };
+		899EE768E3C34C8A9180DB8F /* CDVStatusBar.m */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.objc; name = CDVStatusBar.m; path = "cordova-plugin-statusbar/CDVStatusBar.m"; sourceTree = "<group>"; };
 		8D1107310486CEB800E47090 /* MovieVerse-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "MovieVerse-Info.plist"; plistStructureDefinitionIdentifier = "com.apple.xcode.plist.structure-definition.iphone.info-plist"; sourceTree = "<group>"; };
-		8D9EF86A63246DEB54AD00C7 /* Pods-MovieVerse.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.release.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.release.xcconfig"; sourceTree = "<group>"; };
-		95B9657E7DAD40B1A57730D3 /* CDVStatusBar.m */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.objc; name = CDVStatusBar.m; path = "cordova-plugin-statusbar/CDVStatusBar.m"; sourceTree = "<group>"; };
-		DED26FEDD6394551B274BD1D /* CDVStatusBar.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = CDVStatusBar.h; path = "cordova-plugin-statusbar/CDVStatusBar.h"; sourceTree = "<group>"; };
+		C6E658613EA4D7333DA51B3D /* Pods-MovieVerse.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.debug.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.debug.xcconfig"; sourceTree = "<group>"; };
 		EB87FDF31871DA8E0020F90C /* www */ = {isa = PBXFileReference; lastKnownFileType = folder; name = www; path = ../../www; sourceTree = "<group>"; };
 		EB87FDF41871DAF40020F90C /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; name = config.xml; path = ../../config.xml; sourceTree = "<group>"; };
 		ED33DF2A687741AEAF9F8254 /* Bridging-Header.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "Bridging-Header.h"; sourceTree = "<group>"; };
@@ -93,7 +93,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				301BF552109A68D80062928A /* libCordova.a in Frameworks */,
-				792F6787FC6A2823F75800E6 /* libPods-MovieVerse.a in Frameworks */,
+				DE2D9157EB4568D8E3027BB9 /* libPods-MovieVerse.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -121,7 +121,7 @@
 				29B97317FDCFA39411CA2CEA /* Resources */,
 				29B97323FDCFA39411CA2CEA /* Frameworks */,
 				19C28FACFE9D520D11CA2CBB /* Products */,
-				A6355AE4166E96DD31717F20 /* Pods */,
+				71FB44DFCD83A88BB3F855B7 /* Pods */,
 			);
 			name = CustomTemplate;
 			sourceTree = "<group>";
@@ -156,7 +156,7 @@
 		29B97323FDCFA39411CA2CEA /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
-				4B0847137D1380BC1673EAB1 /* libPods-MovieVerse.a */,
+				67D1FBE10E1C62D022DA813C /* libPods-MovieVerse.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -183,18 +183,18 @@
 		307C750510C5A3420062BCA9 /* Plugins */ = {
 			isa = PBXGroup;
 			children = (
-				95B9657E7DAD40B1A57730D3 /* CDVStatusBar.m */,
-				DED26FEDD6394551B274BD1D /* CDVStatusBar.h */,
+				899EE768E3C34C8A9180DB8F /* CDVStatusBar.m */,
+				3D4AAB9E905347F5A465A054 /* CDVStatusBar.h */,
 			);
 			name = Plugins;
 			path = MovieVerse/Plugins;
 			sourceTree = SOURCE_ROOT;
 		};
-		A6355AE4166E96DD31717F20 /* Pods */ = {
+		71FB44DFCD83A88BB3F855B7 /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				1C20D73F0C87CD0D33E21AAF /* Pods-MovieVerse.debug.xcconfig */,
-				8D9EF86A63246DEB54AD00C7 /* Pods-MovieVerse.release.xcconfig */,
+				C6E658613EA4D7333DA51B3D /* Pods-MovieVerse.debug.xcconfig */,
+				0D4D48181E26272771737167 /* Pods-MovieVerse.release.xcconfig */,
 			);
 			name = Pods;
 			path = Pods;
@@ -216,7 +216,7 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 1D6058960D05DD3E006BFB54 /* Build configuration list for PBXNativeTarget "MovieVerse" */;
 			buildPhases = (
-				0307478383C8F5F0F98C1448 /* [CP] Check Pods Manifest.lock */,
+				40AA869E3105B8EACFDB9445 /* [CP] Check Pods Manifest.lock */,
 				857339E32710CC9700A1C74C /* Copy Staging Resources */,
 				1D60588D0D05DD3D006BFB54 /* Resources */,
 				1D60588E0D05DD3D006BFB54 /* Sources */,
@@ -301,7 +301,7 @@
 /* End PBXResourcesBuildPhase section */
 
 /* Begin PBXShellScriptBuildPhase section */
-		0307478383C8F5F0F98C1448 /* [CP] Check Pods Manifest.lock */ = {
+		40AA869E3105B8EACFDB9445 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -333,7 +333,7 @@
 				1D60589B0D05DD56006BFB54 /* main.m in Sources */,
 				1D3623260D0F684500981E51 /* AppDelegate.m in Sources */,
 				302D95F114D2391D003F00A1 /* MainViewController.m in Sources */,
-				0697E58733504E4B9E89AC46 /* CDVStatusBar.m in Sources */,
+				5FFC3F37AA7C4EB09DC474FD /* CDVStatusBar.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate
index 5072db3c6678e9eb9c8729ab4dab686bc3944e0b..ad00f6c0c5a36992803d6ce57d1b699f83c9952d 100644
GIT binary patch
delta 8306
zcmai334Bw<)}J$Tn`U2tq-jdqq-olu+0&%#bfG}mmzI5POMpU4p$ofYE~_B&fB=dL
z(i9Qd7ePTl@F}3klTAT(*+f8A6%o{L(o)b*zV~r|+}t~N=FD0C=gfbm2c~>DWqy7j
zA4!lDMIkMUMvYKo)C4s}%}{gH0<}cxC<A4pEYu2Rqa4&3bwNE)Z!{1MLVolTnt}p|
zA|6de)6jG@1I<LU&?{&m3Zg~mEwl_RN2}1gXf;}k)}f7P2il1~Lc7pzv=4oX4x-P|
zQFII)51<q1Bsz!AqYLOebOl{Ux6ys{Gx`${0ALV;2xOoH4Maf<#6vQe!2&jLLR-jz
zcF-O=Ku72VouLbKg>KLtav=|TKu_oey`dirgW*sFBVZ&HLkWz63YY=`puodam<F#x
zU>^Jng76x=3#;KhSOaTe9ju2<uo*ss{cr#d!sqY>9D*<5F#HFuz*V>g-@|qI0dBxe
zxCKALBlry-!xQ)&i?A3=uoTO%3fIG09F1df95!MrwqZMNf}7%IxH)ctTjFfo8n?sk
zafblzhP&e)xF_z92Vg%QiicqyPsP*lbUXvk#Ix|rcs8DcU%_+ne7p!R#!K*P_)WYP
zufyx{2D}k(!kh69yc2(fKgM6-Gx#k24u6lY<6HPHzK0*;$M{czNCXiPF-agsl1NM>
zi6j#<v5*uJuo4?_kwzq)WROhKfpjFDNN3WW^dtkxAW}d^kddU6l#_9Ul38RfnNJpx
z#bhbjOtz4%<bAS@Y$qR(56KR)lYB%zCi}^M$XDbDIYquDm&p}!m0Tk?$Zhfqc}O0U
zCmi8~oRm{?Do)KAxP%<e$R%<n&dqtaRL;x!xOQB7t^?PR>%?{Dx^P{&Zd@;}H#dMA
z#tr9+xDnh)u96$eP2?tVJU5e@&n@5<a&K|Vf@ac^%%Se!d=eEHq)cp_mFo3*va;-{
zsj02(USD<_dsb_=%bx0SyRsXlwrQ2+OFfQcNRAXphs-E#J&HjMQ7no>@koyhC;=H!
zA~K;QluRS2fJRaw6;UyjP$`vBIaN?4Rjo%Bl!C0thV00JoXCaT?AeftyvRrE(I}ch
zThV0Nnzo_sXkYeROiO4>n!dF>F&{jrHELUh+R*w`a~!o}inK=^P)F3MSLa+uL4LWv
zANwuy7w1<LjrCJR)wDtI*ZM;Sc17J#ca+;Vv9LJ5ynIxCiNAO4qrbdI=iDCMJBHZj
zyxyI2yA+J@7giiY;Q>8SFD5p#tSo;*h`r?1+1>~BLupm0FV$9|{xq7V2XCtz1<+tr
z5N>9=RiQ$vqv>`1hoUhkZ4DZRhNB`h0*yq)s058drD!ybp$%y)jid2YPYpDI8foGh
zREElHuCZtw^HDjP$Q)y$=9<ewn=<E^X|u3P1}Sy9rIlrc{#K<!w$4q;h7RcEuzP0H
zB&s=96Q{YT?Mf!3=3)bDFO3oj>y%rJUPqb`T7q7qDbyN5OVJzDMm-D_vF5fq^fn5G
zKd(Sl)J`2CRE<_rCv~yU<F)$E=snbS1=Xk`B5OUi9&PB~IXAngu%f7RRDKzA+xq8j
z+l1annrgHeZ9!XUD)mxdHQI)@qYr2rZA6<ek&-w=a8qo*fH7mp3Kaf#4DDed{uu3L
zQXQ3*MMDZERQSugD3wFLpI6mxLZ{>J?;BgVw#9}#+PGGMPtd=6vUv7rmmNZ%puA(~
zGd6zzKgS<E_{#+RTiXsZ)}Of1>rToc+Sph#A-f$%fm(=vfewdFKZL%d&1s9jnBHS(
zY4MQqfkR3QD@**NDmwZ{4XYR~s#V}?^vxh;{m!|aDl75}iv7=BQH{R-t20ia(@0Z=
zzNMK}=nT!G?g8zxTX$x-%&jO3KCq|)=pxOo6?q9=W;S)MEG`bAOJSSB`FAxO=X#Wc
z)1X$}AJEM({8(ERx<%X4^xBSh(7oD@IknOrpq~alQ?CZw)#$-r(ftehjfE)&Jw(5v
zN3=cdKs#2W$LI<Aopz$#Xb%>rSt+vvKp=w62ORBO1p?ZIruXesI=0B)(_dEZKL%o?
z00~ILX<1QJ;x}gQPtKV;sLyA#YmFKp2L&@KJHNso0{JtHfC}n|h1R3ptDphR{ku>m
zQVY?b>%)W!%PY!?Mh&BR!DZI;_AFbWA;b<+DxR6f{K&pnv*x&(#IAjR>MYQM5v7H|
z0131w?G=JVFwx$$4@>0~+oV8^_9-BJs&!!trgcr5{b}19-6Lnyu64p(&<ttTfEzrJ
z3SRI*8Z?5&&;**&ezZRwKnK!6bTG}Q1+<V3S%ZAg0{KumWI!flK`Y3H)-0R-?7x`~
zrNgLbI4z<h=t%0`nqe<slKP-~D`-yLbp0V8rLBYkFc1d8U^<GH($RFxN+^Ir7y^D;
zM$2ghtz@=bax7^MrRZKYjD|5#M#s|0lz%R$5+<OuY8VUSU_2d1$I}VbFcBs}0i8%E
zF)``E-Ok0$U^=|~k8ZPJ4!lBNqEl#qrW@1m)+SFO(wi{SAA|WUR109?)}Skj8%}9$
z$QQxl0nft2BA;Iki(m=LtHnWnoq4ar+bC@n)9MX)6UM_bSk82tN~h5YbUK}}3RXZB
zgrJ(;tLRKRi@r=}v->QjZKlr<Y~h<3P(p3AHav~iJJL6g(5?gXN{8f6(C1g^J+7v%
z#&y$efsatyYS;?z!#3CsAHavO19s9^=v?|Lok#yg=hFpr;c6DH-LR)7Y}>+j7OEg!
zR1>mSYwoNVt62*7DjF38P9N;X#U!S>+*xf}rTOf>)K;l>Z<|c7J+pPH+wSwWYLb?g
z)yU;>d4lnrC%BNKZ2i@_^e(;I=l1BEc)jfLFE4e<eg)s6wD;f$9AzdRhZFEMd;=%p
z6kSZ0(AVhebSZs<zDeJr%id!sI|FCo9Gr&>aFM-TVrnj@yXbDZm+qtgW^en$D~OUQ
zojbfV7>uY+f!pvP46QqG7w*A*`Zirbt7vE?{KT4mfrqr3HEpC@n6C#5#-_j@n1s9k
zi4g{j=}P(zT}9tri8&mB1(>6&>3ehyyQeRV94f|gtU#I-D_H%IOB3qh`dG~>AZ|d{
zR$&cYSJNEBs;C0%a13s^P#8xx(Dgxsu$xC#Pos-H7AX`-^G4@a4DVAkYKVV)PSL1}
zkXZ7Us*^iz+&CpZCRZp`!3<%8U{jGQCOPNbx06Fk#75UwS2f7%S~{eh;Uh{L{j5)H
zxR2Awdc>%z8vaGzvAB5svtEjDuc(~Va3R}$Y1ye@Ur{Qkg7ZWUQxU2_<Jl@5U`)OW
ztzq1KGunziWbFN8wt{_!ZXi~KgWrj=BUzoo@mL?UiBkmFfD=$&u)lbo;c0krB2H#i
z37c>d-9$HsnA5{C2r+lNC3z{>fm4~gu@k$n8++(h`aa!8w};*B!)Z0{{(yd1>+V6d
zK2FD(VIODE9aT7s?);07+b|#J)cW|N;4Eo(0W+^ce=T@HT2c>p#GP3c#+~S%D%^#B
z%;p~`vsiF$O&Ky~jH%7`I<0%*KH=WI=_gf;s4!X*JSj8j@IcJUR0t2kgXyRAvk>Dk
z;iNIM&l-8=FgzSrptQBP2#>%caWO8zqi`u6jmO|JTuu+rgY<Ly1wBN+q=)H$=vVXz
zJ-QZGB0C<3$KwfjBA$dN<CpLh9H7S-t2sfxrr*$$Ja~C%%0n+6dh@`_`PLnBD@gIH
zcpj@r>(D~{ui#xpazlE&rX=A7cp)Q<?ZR;C%77KZK^Bol%GA#Ib+&BcrS#OZYKh;%
z)vPWtRhQ$p@d{jpLrlSM>1ld~o~7qj;g$Fu9KN$sLC@0*JSgaS9#U&8-mWas;VpPu
z*dbf-`}89HE`+xuJH5noPY<?G*==|iThZ}udYNiY;k|et{sjM<<-(`<GrS)kzz6Z?
z_zQdpA3$wT-{2C}M$2`2pFW^hc#zZUj1FtR!AI~>9L}HP_yqnMe}hlrQ}|nC50=y$
zA-P4b(cAPMy-JgVm+CcYi_f99A$%TRpx@IQj6~o|_%a)MfO+^@-*!V7ttlE><S*+{
z;~O?XGX0@%Vd<!$MZ+B9ONwi~_XEBW99&<|;hW5BgX_n4t&{R&SPH#aGw3-fIF9eL
z86Kcc_-E9iUmbg5+`CVhA(U6-myD(j=#P};OgK+|#gBqh8fYRy_%|kgN`q)Meu96;
zfAkHPfZElZ-lcbf>lzH!vHk=I?w8#&uT4?0KOD<yLI}qOCaLw|v?Br%8SJFCaYV=(
zJE^Us`i`zFC@v}toAVUOL_#!-s1qrX5jjy1B~g)jq&{gt)buC%GyR1=q`%Tf^f&sL
zKB2#_AyHvaqjD01YKS_CXZZi42IOWQP%TsEK^o49tu(0{bg;7+69@hCDLW_b7qas@
zbs7`KD?+3RVTfkCZyX}cNednb4<eSyP0dC|(PM)H%)+EB(uQ$1(u!o0);w@LMDQS}
zCT&R$+Qvg94?@PV-Hcnm6d+xYf^_{SBYpv+Cb_I@-aotklRVdH+>7)LYup>H;6Y67
zA+(b8r!F2O)cuq$2WOe(nS*O~4RwPG$<P{}P5iVu53&&Hk5-0<uuaDQ;@CC7AjPC4
z7_W<p2$4}Nl<~TTYBHK-D;dLslI9#E6-?_&GB(&n7Zcz?#e?UC2}LH7Np%Uu0Dhkb
zEf4ixoKA!%Q|r=+hbSKE*CkU8$tG;q6(Y0A93C3*pnjfCftq}(O`oU9K^BCQg9puj
z%Z}PSsB_R8<ee}q-z0C5Wn?*do2(#JBt)tSb5k@AIv!$pXvjk>4{<!i^PuO!z(c|s
zVq5hTp=+KZbOZA7V620vsScv9XAtceE<<ED4~cac-TPlLdVqWpj`%_HIS)xZB!|c$
z@+A)p|0xV`vF4nZqvS-m$FVRbEPuyDaE~P_=`=YX#_kz%mYn0k%7cvudo{U0E{3t|
z;KBJEyWg|WUjHW`UxeM8tn00RcKyGxdxzYwh2gz04Ban)p{j1LSBt}6$)n(RaaxAM
zaDn<R&Kme@1t!0fKb}LT2@k%%L5AZPWVi@Uz(X1jjh;j1pNQdPwTNl_{~@L+Wt-QU
z%^;`YVi;B6qBt!V%`t#9<AE8)ibu<pTthAvsyGIdbRM$lEFL<sC1^){3n!PvS;M1}
zIWuSBQh3PVA(MwJ9$KwrII^?E^fBlphm$kB%<J`2dT?o6I^)k=Bd#&mgloz*<C=3V
zxRyMyI@E@TwmjtU(2j@pJapipBU>D6F2<m1uUaTFaka-Aj2;Y9T7yRn+O5P;00FK$
zm&eEjm&-%vDy|0)Y@azusbY0LcXV-4Mb9GtxONr(lJc4~<k&tb#P#L+@z9lr9?zC;
zZXj2{AjS>i26Op5bmO5r54qJ`6!LL?<{Qe?&0{-oCiVHs*FXFgJd+R`m^{CR@6@@r
zm>c~fVOl1voOwActS5CFGib)&hK=LKqcp~T)0NMHG?|<7+%{IK`aa#Wb5p~1Oyj2W
zz)T4Yd~V1r?v)qKJ(tZrkB9!@xd%{pA4ch04=JiBEi-1!zWz5Yg4}B_67V_`@CFZq
z!U6_UH`_-u5!wEN%3;I&fwIgpf4(uJ|K1u&NXSmT6OawLQB!u>9X=)Nj|Q?M(v+GL
z(e|VpI|uDe`m&SId{RjKWHKvMn^;vi%+5HElH=rSa*~~Mo+0O0ihsw>JFjwx!yLy6
z*eR!&opZ|BNoPH-0fVrX(=o6H8gY4CK0CQw&F$n)ayKJzM8gP2M1I8h2tHzZ#LS47
zBNj(2i+C?$ZN&PBjRKWGCol;d0<WNnAWP6ekSpjd@C$|uMhHp-rGhbnD!~T9X2Dj$
zcEN{&oq_{`vx4)2i-JpnD}rl+>w+7CTY}qyyO9x*k&&WENu(@N5r|Yp){j(2Mny(P
z#zZ!b>=ijFa#`fQ$nS*`VT!PwaHz0USSG9xjui%kFAL`g=L+Wu=L;7K7YP>&L&A53
z?+MomHwm{0-xqEd9vA*1A|jzkERu>;qWU7WC`x1$c|^@b%|$ImnWFZhUZVb@BGG73
znW#cER`il6APVrJX`&gTRidxNAQp@3i}m7Eu}|Dm+*;gToGTtIE*Dpdr-)w>&lfKg
zFA^^mzbRfOep~#G_<iv<@gDIB@fq=T@lElM;=AJe;-4f~B9qjUG?2tf5+xRiN8*z-
zk~ERDk+hR^kaU)Gm2{W%lMIv$mJ~=vN+wEp$-IDMvE(($QpuZ=kYuG~m1MPKjpUG&
zNNv(4(&o~Z(oAV9X=`a$X&-66bcD26S}C0@<)!na3#38m66x#GH>B@KH%LE}?vy^1
zAz3|Hv@Aj9lzC-ovc|F&vUFLdtd)$)cFXq5zLFi4ot9meU6tLJN6JNViCiXE$O9^Q
zeYsj5C6AWJ$X#-e+$&F$H<mY*H<!1RXUMbU+445>Zt~%BUjBxBz5G-8xAM#KUlmG4
zg2Jn)R7_GVP`s|FR;*L3S8P=5QhcU3p!i&INO4&4jpCHzwBoGdyyBwbk+Ol(sVq<q
zSC%TrC?_g;<uv6C<t*iF<&uDMneuIAm9kp7M!8P8LAgn}MR`UgQu$OZRT-*IsytOs
zRc}>aRlcfF<yQ?;6{*Tp6I4@GbJR=KZ>m?Sx2Sih_o@%8Ppi+W&#N!0FR8Dnuc;rX
ze^x(KKT<zd|E~U11DYgF2Ti5sZOv-U8qHSCF3ldzVa;jHP0f#*z#Yv!%>&KPnunT4
zn#WPnD0!4Js$NusC{2_$N*C2IDlRH5s&&-NsO?b~w4jaEHrDpg7HBKA<FpgBle8~s
z16p1?O*=z7OZ$fQE$wpc3T;TcQoBmKTDwNOPP;+7PkTapUHdp%5#2D_6WuyGH+pb%
zQS`{@lIYUtG0_tP(UYU6MAPW0(bJ>fjs7V5aP$Km(us5uolK|DsdPGBLtUIsuS?J+
z>YC}g=!Wa2>E`Pe=oac0={D+i=|0x&(|xMjuREx_th*H>ijl;~VimF4*v#0R*fFu+
z#9ofQ9(yD9R_wjl2eCiLK8%Zx%Z}?7*Eg<z+`zcOaRqUKk#Qw)rEz28%Ht~I=Ekjv
z+Yxsn?oQm3xIg0|o{Ja63*(LPw)l4O9pXFbv0kFr>SOe=dc8hDpQz8#chh&*=jjLN
zN9arRrTQ{`g?_Alk-kd5O21maM!!+NS-(}kO@CN_NB_i7-=H=`8KMm_hFC+q!C){N
zOorru!D7fTWErvzZ45bv_J)pzE{5)g9){kAeue=CYFKah*zkqn$ApLkYeHtikc9Gt
zSqY00RwsOvusdOY!m)&t36~RYC)_ng80AKlvA$7lOfWi)Zeyy^XKZ9_Vr*v2F}62$
zG<Gp|Gv*n48haayjZ=;Djc*xu8TS|u83RX*$BZY8-x|*t&lxWme@cu@R3_F>R3}Cy
zHcre-9G^HRadqOZ#Dj^~60axTNW7JJJMmuPgT$W`ADWaVqse1xZyI2lV47rl$rLd0
zrfH@brVmVeO`n+#m_9chGMzGAHvM3_Y5LK0$MjngNlHjcPHK~so75wzS5lv(AxUEb
zNiQYMN}8SYO46%IOOn<lZB9CnbR_9a(z&Dy$t{xGBzI5llk86($NsXgHhEL>ndEE9
z56nWd*eo^6%}R4Ua|5%+tTpS*4b5(Is@Z35WNu<^Zf<GLFlU)to7<Y(nTMKZnBOxW
zGT*VNEln)FE#oYUEXyn_EFsHE%X&*-yX8a6PRlOK9?M?KVaqYg*OpV3bC!#i%a*Gt
z!W2`AC#6YB^OW?Itdw>s9aFlbbW6!inVhmA<*SraDOXc|P5I4AtV*lVYO;E)jjT<r
z&8?Z%R@OGw9BVJ@U~9g$&^p>$X&q;sXbo7WTBloQS{GZFTen$vT8~;!Th9fo7p<49
zH*Er&$R@SfZBCop=Cw7lHMKRjwX|i}`q=v02HEm$g*Lx!m~FJJ(l*{U$@Y?Mj%}`O
zo^8HunQetFWLs(5XxnAmW7}){#P*f#itT&b4cm{lyS4|mUu=(TPi%kMu|3MJvp2NI
z+4Xj#-DFR;TkJNw!ya(iJK2lv^X*&g-`Jlx^p14LK*uD<bjK{m9LHS8V#jjF3P;GX
z(y_|1+Of^C)3MvJ*YTO-pyQC^u;YeP=F~akoe9oFr^RV?I-D+Ny0fD**V)tA$JyUm
z=p5=Sa*lMCIF~pNI)8B9cmC<B=W5`Jb)~pkxYAu6UEKn%Tvtz5Ki5FlU{`@_jBBE6
zq3bo*M%O;qY1cW|Mb{<Q71uS_b=N)DFRn+fC$2x-61U8)aI4&LZiCzCHo0By7VdO+
zrn{B9tGkc8zk86o!0mUBa*uIWxW~FDxF@-%yXU!=x;MM`xDU9$a36LbaUXY|b)R=%
zbYFG{uDZYXM0gTBtvv%hBR!Kn0nb#=4A0A+S3L7P3p|TF?|9zzyysc#S?}5C+3eZs
z+2;Acb2U|+nw2^x^{vz|Q~&VVy-mF>ycynB-ZtJGZ-1}fJHlJy9qldi2D~%9v%Pb@
z|MD*JF7>|YUG81s-QfMm`ycN~?-lP&?``kB$=;v5kG+5RkdOExd~#omuc0s27w<Fp
z96q<t>ucm|>TB+6?Q8Gr<m>9|?i=JA>MQaU`$~OdeG`0>d{cbXH^&$Bt?<3;TjN{r
g+vNMex6`-F_pxuE?|3bx!npRATVDHHclVwBA4wy*I{*Lx

delta 8231
zcma)AcYM>u`@iSzle9EVnkH>#GstRo($YfN1xlfeGRiEo&;o@H=wL(c!&VT`plqRK
zSoV@7in2sRL;(R21Vscz5D^gp^><0B;#dFpHLrfgeeQYg8SiJ@?VEah>cYIhP$WXp
zNQqQPjXcPUe8`WIP%>(OQcx;th#H|Zl#RNeuBaR8j&e{B)D!hWz0pvVj|$K*G#r(q
z3RH>4qH$;v;?XoT2fct^Li14&y@p;#tI%q+8ErvZ(KfUl?Ld3cKJ+$v2OUI5(J}Nv
z0DXi`p|j{5x{R)%FVQ3P8+weMpr`0}^auJA5CC8xP!A$N3=)U|Da3&VtYCvgu!94f
zkPHnV1=65B^njj_3xgpK3ZM{1LJ^cfIgEozFd2B533FjSEP#bj0~=r?Y=X@Y*aBN&
z8*GOiuoL#cJ8%r%hvRS>K7mi+9DD{>;Tn7eU&FWX9o&Jt@FV;RkKi}>9Rn6%3694a
ztj8v7#)-HkPRFfqYupBB;I=pux5Mpm7VeCD;GTE@9*76w;dlft!{xXFSK<kH3Z5Fk
zv+!&@7tg~%yacbnt8o=xhj-weco%*X@5YDlVSEH1#mDgH_!9mCU&dGPm-s5a215K5
zzKL()JNQ@p2>*s3<0nKwgd~cHNGwqhBdJeJ#7#WJOFEIxB%5?0T}e06o#c=nq$lY`
zdXqjR(3cD#LrEdw$uu&Z%pfz#EHazSAuo^@$y~C4yhdIptH^3nLpG4jWDnU(_L2SM
z9dd}AARm%X$fx8CIY%y#FUVKq2KkZPBR`S*<PrIe{LUdx$VG4>E{0QbDo)KMa0ads
zm&P^bns80IW?XZwMJKK$m(I1~T61l<46ZGg$+hF!a~-+fTpzA4m&^6z`f~%gfm}XU
z!j*EPxiMTBSI$l0rg8ypIyakJ%q`)Ta?7~o+zM`0&_Y@Sex%kxQcFf!vcF+c+YFCC
zxj|!3N&|nIr&U_pR-T6bltvj18mFdZw9XtPjmyet+q<-ERQc$<p#>SGLo165N-EAG
zF_NGdq(Nrnu0dLqfOJTY49JM;BNG)+A&sDsv>uJ3A{t$TEXay%D3RUu>@K%ZF_q95
zDrNUbb{A83P_J|Z=P3OxTRgvBkGvsmN=qurN{fmL$_6z~Zkv>r**4YFsBK1yCnYnr
zl_xDZsj;VVo7N2*G-#8N+}58I+@qWZk-;>TF1KEtl#Njv<lcaqpr)u9YK~f<mM9&y
zLak{ml~Fm3qw!Qhl~hI58<=!$Q6_4K+M_JgfxUHN;%R6T+LX4W>9jR_Ys-Y)s@m*C
zeb4~pUW@voT+|Qsr&^jobyU9=4P--uQ64q0ArJMl=`+-0ooECq4oxpaBhe^SM2)mQ
zHBs|gRDw#;XjDQi)J7B8)g7$V57N}hJ|0a#iq)&B^$ePfrl6@P5WFEbiP;0~lbzFL
z$jE}B6~RRslMGEqGm)YS&7k%wG>bZ@HTZ!>FGMe*xoBSS2aTS%s52<mcJo9_<5apc
z5s~#oJx1qMjObffl3y^sePKyORa9>0(y@gFy$Z_83#90bSP~-&F4S7pmcgHYVf>kq
z#LBB=J-U|WmrLPHyh0iNY6*Q!>B_#U6RI`Z=UC*78#hjh&*%-t@WhzVMBkDIt=_i`
z{wZ>cH<+2w07Suw30~_6mLV(AM3xg*pmk^?%Z5A9E|vvPqD$yHx`l3|hv;$eR6<5X
z$OsG2!k|j$6rz{WD~JZ$>*m+1way~+YVcr`%C;zEo;nLIM$3@98ZALfsh9eynR7zE
z(la~%s_WrIRcL+4E!AiZT8q}vB$`Yc(3Fr{YS4zTTT*GmXKvwTXeW9zWaVA7Q5D)v
z)9S3epIQ09Gb=X^b~bbuGG%LC?;KobD3+mj(IMonLhsRLRp>Bn&X%?q9bM7;==f^d
zqE_@1=)-~8Ih`vj@`e-@v??pho3I9*VEWVE**W1?bNUz*{;SjLWAsUg>1o=k3fUMg
z-NCU&s|J0BE{4=Sk1o(QG^3h@TqxQ?5w_ddY6!Z@Z0X*FuA#5c*UYrvpd090bd#C*
zJM=xxr0r;XnngR%j<gf)OtWbh+I1890o_4&(U0gJ`U%}fKcffe7xa*JqdBw(?MZvl
z-t-VXPH)g}=}qe1HK4u=qJaYeiUA=jNs+-trbMF@q=<G8>k3gI>X)696@pz?2Eb~F
zW?sBtYS0N{(eWyf(LS`rGc6$=5|Dd6x(-TEff_WRW%Bi<xwIecPY0|A9q7TpuJxIk
z1L+{Tj9uRgtJ}w1tN|BznKi%-9y*xjRf7-Rp+lJ9?%-9k#|^2_s0td=p|t2CG=?V7
z6q+%qn?nm|3F*)ZT0<MiU{9IQE|_N7W*<Sv((yE(E~O)A1s!)DvY-QWWF(!SGh{;-
z=nCDSJGv8;T1SeC=`cE)meT^76P#&n)DC(<qiX04edusHk`|qXe$bzhrlUJBC^svg
zrPab=g#~3j!-ioC<j}(0p`|6m3Ws~g7Z=r<ZU_twCfW>wYRG3cOSBo&o^cr#;zCD-
ziT)1aT5O$!QPm+RorPkyUI~=KXc!Y5V^a!BXemX(ZG!wzTtNj?26xyLjQLo`e1}aP
z59471Ow0|XiJXeE!jj>%jE)IjwGGyU=1+mC{W5y>$Sf=>2>Edh1b{NazKO;#yJ;{z
zNE6*0%wU5w(Uo}?X0i2W!x(r0N*S)bL-NWC7!tf?1x0xkg<}gCbtNsS)pQ=b)H6G$
zXZKFkFb~n((Un7r3WtUa5ga3IlnXDz3gq4huRstM!K?5ZEQTep6qdnqI)P54ljvkR
zg-)dbN-0mLZG@GfKtL9#f@+3l3#?-?Gd&y_Vmgz)%IqeluZ5y$m*3NswMn}|$as^^
zpv>^B(!pM6w3ZQue{6E?uc!{C2jLJ>RKvUQ9-T#JSHodALg&zzSavw&ZKr_`;AH6Y
z3HXq{KwqqekKh!YOXsoA%6i5Ia0VK!rbV%Wh&p!X;Sy4;feUaEKBx2P0=jSwd;yo?
z3VoSbauK5|_Du=Ebtcz0aHBu7U}a@t{*Vb31?63&(s|93{V&hRnmUIxOZuXRWjlSP
z)}lAzRxf7Jo>>{ya1+rp@I9ly{crjwpEMK>dM`VF+vHxiQcmt{M_)0g=dTXu9&>F9
zLaZAV>%(@r2S0~Y`w8yT#dOK@s;!EOuT9JF7@h=Qcd0md%7E~?OR26k=^vqB|C26f
zDG*~6g9+w>w_Vx*T|wXd&v3+%xL#d2viKNF*U**!8HzXtOY1_BR@2w(!Z5rpR<JO{
zO01%*C^P#%!Y~wd0b2NM3>(5hRrNnX^^Y*3;ShS}IBdra7%H&?JFyG9u?Ksx5BqTv
zPNr+=I=Y^|L2Kv+x{+?8o9UK~IHeYqI1M)rp%OP^sEptG43<0S+hJI~^A{{T;0_Fy
zxFg;643;>X!4h{tcS8SkJDVQ*FOsV31nPzRGWX!#xDVY)cU9wD+>gFV_dEk89*l>E
zfr*DOVD5h2dw!q7gbQ&o!yz7tN8uv6m+qtc*WeOd%5eA=J@6L}@mS`(asS5Af8Y>L
zWK$>od+L8c?%jK}SgX?{fTx9lhIt0GgU^YYIxzoPSK6tdWO&7hFxc@N{K6n<JnJRf
z<`-6!mbEV|XV(ci6?sEPRpS>K4j21ff#=gVehJV23p4N2!~ew0q7Y_Y#jnvL^yq(J
z=5NTX3`6GF{|hqSPz2%icoS<t@Ef=WZ@?Sr2lNE}ke*zNH{&gME8a#wqMy=B^b1z9
zCM7j@;yw64X!>5f5AVls(NpwedYXQ+mI3Jwe8k`*W=qcvw*xnmrgp~f<I}7|$H(yp
z_yqnCpTr;GQ}|<ghMuM8=x6jiy+AM0&qE!0=x2L&uWcE`j7_L@2)7S|q^=;OsCJ!6
zW;F<ZjlW^d2fj`(SK%A<3Uv>X#<Eh7GrFj-qE}(TxU7nT;_}*X`wkti#^2-H^h<jE
zuey%!;`<?J{fO`3pXgP3jefNTzkzJ{7iNGM`ZWXS>J)!q{NOMM>M-z>pnnn7AR8gf
zW-;^|YBi@%>+?JXi6D{4y?QluOG7CuWN#8pBz2;b7<!Ak!(tK{6O+hE9Q}^|P$%Y~
z7@{QF|6P(KuqE~Md$#0lYVG?M#?0xnrT<vmOcMV^YiG1hdWX^8WjY>8jSCdM_YWc;
zX^z}mh@T{pWYU17kW|u;G$LuFF=;}Yl4kTC{fXYEKhp>F7y6L?N*~eR=wteXKHWlE
zkd`E!v_f}C8<IiVl1$Qyv?o~%6~EIzc+m2or#U<rd8p5WnTHfM5XD0#5AB#h?p+C7
z9t22ksPtvB{-&<Hk%43|GZ~vSu8QQ*KdHOUmic5@=mVQvMTYZ${{AwORI*G+Mv)>?
zOiD;88BNBJGEz<|cwpxYm<PfG$Af?eArBEeMDkFNhp3GnGPV|kWMXYnBvX-%2T?5!
zc@WoTMIO{)k^P=-&}kl%n7qV8^s}@`7XD{itdn{%S;kTcSwfcbAmJgVnk*+Pc#!fS
z4=2X<`Bh|XI4_bl^aUPbtI0Yz#k0ngmF$0In-HcphAVg-|1D$(^E=r}wvp{T#PJZ%
z1AE^|cEJ@Mlsu@yx$|_rWLC#r!R^lafwvfw1OK1Ac!nHgQ{Vmf)PHB&I&lt@W8ut6
zj?%?EX#Pu?V45!`aFU#2TO0Bb4+&M|V;*$WI)H&YJFmE)w)uN*YxgM=;w%q_aIz(z
zk@Kvx$gV6ZswSVY&LSLV7nxH~EX9Ar=rZ||p(Qj{MXvH-stdiZStEdA8?dQ$Z9n;z
zd>=C5O>&ET$Ag6jD-X6c<Tm+%+~FaS2Nw@M=B$mP7XsvG@(bfj9`InVA`f|RQ1^49
zo*|E!uusU-P{&zOSX^KZZ9uEzuCC?5Su6h^<WDAlMqWihHTmPOog)VvVSG7;Rd!`q
z_571Bis2%;dYmMxFJoLDZjX8J2C2A37sT3QE}9b$lE(bCsjIc&8a6Bm@7-(PpE-$>
za&op&;bJ)%4}Kn!s<}9h!6uo91}yWp5l;$))ZjGa=`-<vC<=)m9@IS>+@Sbz85^u)
zY2;i;v5~9KnK(0N;jEmEOXTdFgLCqb%0ojQ8u5_ELt`GA@X(ZpW;`_Kp~XgI<2<2K
z!1=i(E}3h<rEsY<A%=&REab#Ir1Q{<ht@o_;UR;Ew$!>SQ!)h7xvcPpwr>4STsKy!
zxXxTQ*M;lKLwg>wc<8`G$F*E{E{E&E_2i)w51o0)=AjEy^IFVn?YTkd_!@37m&Xm^
zfl>A1q2FJ);0m}x<X*!K<A!r1c<9DMcOG)qa3i@<9DC})Lx^Rl8rgzhO7+3B(u!7G
z1vmb`XeMwIxk)_q=AjP{eW}~r@>$0*6dA1;8P9N(8Jy>)?V1*=<N`e8hQY$k;ARf^
z%c%@Ad286vEJSM&lvk(y9Bu*IxH3s!<mPfCxR<#3VR`%WFo227!$2Met>+fvt=ubI
zkQMr^JPf9nc*x^n2&?y(LQ0re__Z3!c1DF2L5X5npw`_hpSk-;x58n}-2;1+=I2c?
z=2aMz{7sVmD3YC0n~<BGP&Z)*UESD8bbmCE*x3<hQ&twT*|BCW>CaO7P*OmKvs2B5
z<PGvBIYy4N(@K^C$Z2+7d6tFrw=DL)XYqEIombu`56D9jc*J08V9s2~?dQJWeig_B
za)DovBxoV%Cdd)=6!aGK74#Df5DXIJ35E*B3dRd23MLDt3aDV3V1{6pV2<EL!Aik)
z!BN2l!EM1Kp+s0;=o2;*wiUJ$W(hkAI}3XW`v`M|{e=UCgN4(Di-jA6r-he=H-tBZ
z-wAIAgm;7wg^z@fg-?ZlM4$*|gexK=Vo*d;L~%q(#OR0#5i=rQidYu0DxxOhNW>=*
zXCpp~xEOIM;&Q~Vktk9ZX^5;JWsY)3^^EEtH8bk_sGmjkL{gDXWD;3KHjzu@5&1+(
zqQ0W3qPe0)qSr)AM9V}gMC(Lvh&G5eiMEIW+eGh+E{T4QmP9+E8%8&dZW`SpIz75|
z^nmDL(bJ=6M$Z;E6Soz27xxtR7UzoliwBCQiRX&viRX(Ki`R>{h<A$*icg9^7Jni>
zEB;J;LHvsZOCluoBqE7aB9p{P6cVqbt7L$rLNZn|UNTWKSu#~ZCDSA`B(o%QBrgUe
zRgyK5b&@wE8zh?~TO`{gJ0!a#yCr)i`z4oS>cwbdY%y6ec`>tNR>r&+b2{dF%snY5
zRZ7)TtyCwqNt30Gq-~_x(yr11X^C`<v|L&#ohDr%eOVfmzA9ZTT`FBJt&wh&ZkBG9
zZkO(qzA4=!{ZM*MdRO{5Ruh{L8*s#WWBswov5jII$2N^^9@{;(AhslSOl)~<W$bIQ
zJ7dqs-jWGr8ktR&A<LAtmvxYJl4Z-f%DT&X$cklDwm|lV>@C@O*+tnU*=5<6vTL%h
z<#BSI+$6WiZF0LjRh}--l((06kav>zmJgN(<TK=J<lE&t<!{RO$PWeNAIeY5FUxPq
z@5>*^AIcxa<;D$-n-DiOZc*IIxSF_)ahv0#;^py%cw2mOd`5id`0?>m;%nk}$G;PQ
zBK~Cjsrb|J7vsN-zaD>Ap;x#R>5A5h3`M4*y`qDnlOkKuRncA1Ls6(0r6^XED#j?v
z6_tu{iV2EIiYbbKVud1bKyg(GN~^M?vQ#-=xkdS*@~rZ_@}lyR^1AW|<z3}H<$dJ?
z<wF%wMXI7y(W+RLTotcUs!~+FRr#ty)hJc5s!Ua(8mk(wnxP7+R;X60R;j90+f;j0
z`&4hK-c}t^9a9}wolu=rJy6@!?bKb>1Jt9{W$H=lY3kVl^+NSZ^>+16^#S!!^{49d
z>Wk`2>Z|In)YsKF)VI}-HAJJ)7&HwvEj6t*8JbK@7tKgbk)}kmK=ZODsCiYhShG~K
zT(eTMO0!S%mga5ELCt%b!<wU-Q<^iHbDHy-i<%pno0{)5w>6J6k2Oy<e`xDz6<U>6
zqfO8{w1F1dbZu*GhBi~%UfV(2Nt><hs_m{Ft}WD#(iUq=wPUp9+Dh#>?F8*4?G)`Y
z?SAbQ?Vkzegsg<(gn0>@5<W=yG~ryr`GkuJUnP8>@I%7ggnJ416CNZy)Dc~zE=m`z
zi`B_>@j9h0Mb}%GuPfAz(iQ8<bQQX>y79W%0o@|qa@|VZDqWSXMz>M7S+`ZUUH7?O
zq<8C6^{w?i^}Y3j^~HLspQfLyU!q^BU!||ouh-Y;H|jU*59p8TFYCY3|7H*wEC!pw
zZg3jh2Cu<yXl!U<NH?@LWEi>`atu8Uy$$(>VTKWgk%mgcG{X$TEW;ebtA^JNfz^g;
z!&<|7!#2YX!!E;a!(PLF!(qcmh6{!t4Nr{%V}!AuQDhVw6-Jd&V@xpWjYeY&V?X0m
z<6`4l<8I?#<9_1-<2%N8jfad!jK_@UjTeoVjF*jH8m}3@HhyFL)_AMFqJC!m^7_^F
zPu2h3<TDL4jWU&(Mw`k_m8Nk4(_GUc(^AuN(@N7S(`M5y({9sV(|*%?ro*PAruR)B
zn9iH7n;x3}G)J4|=6JKxtTr3XCbPwCGuzEc<`(9b=5%vwbB4K_xre!zxv#mOd4PGC
zd6c=>TxuR;o@$<Ho^5`?JlFh+d6D@w^Ahti^IG#3^IPUa<|F1~=D>0D$L3GWXUyl!
z=gqgwKbilqs4ZHH&SJ3Cx0o$fOQOYLaalYTpC!rCz>;n0YUyt2Y3XChwG6NfwhXll
zvlLp2ETxt)mU7E{%O=Y{%SFqd)>y08+S=OJT5g?b-Df>*y=eWydc}Ix`h)dH>rd7P
z)`!+dHi0eD78S6GZBm=eX0WB$8rhoIn%mNCZETsgEL$gA7h8ARaN9^*k*&lw+E#9>
zw2iY(uuZm2wNcwj+uOEli8#@g*eP*z;)2Aji6;}!C0<Cplz2JuM&jMXdx`fGA0$3Z
zd}J5cqwHe4)E;kF*|m0^y@`E*eWbnAKE_^QpI{G6wokQF`vUtC`%?RIdyRdYeW!i5
zeV_eZ`(gVr`*HgT`xA%7(bkde=;tVLjCM?L%yKMsEO*p6wm7yqb~^St-g3O{IOsU#
zxa7FvxaPR-_||dD@z4oQp|hS-=2ScN&P1ov>2`XZO`R>A>CQIJOlNy%H)juLFK3^C
zv%p#8EOnMSE1i>_0p~R5Oy_K8jq{qTo=f3UyAoUmm&s*u`CMtPbXS(EldGqzzbnsG
z;u_<saE)_KbWL{6b}e)*bFFk;a$R@*;(F>9xMgmoTjSQbO>V2(?smF|yVtt6xc9jC
zyAQihx<7V*;lAho+5OP{n>+B-{ig?e1fEEb$RqKXJywt1<Mg;aK2NeI)syCF>S^Ig
z_jL3O@l5h8^1R_W=sD}T;<@jQ@+Nq_-coO+cdqvp?@I4_?;G9?-aX!Ty@$QWydQW^
zde3<;crSUcc&~ZC_CE0`d`Z51-$>sWU%79xZ@O=m?*-pH-~51Yxv$!{&R65x<lE`n
z?c3)&;CsjStv}A6?$7df^!M=(@(=MB_(%9l{bl}2|9JmI|8)P0{-A$(%Epu}DSJ|m
zrkqSUlX5lXhm;>v?x*~c@+jp=${(qsR7t8dRi3IyRi$cD6H;5H4oh8_`c~?Z)Q?g>
YOT8H0o+EZdsSH1Ht7`}9uBkWw53rBGCjbBd

diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
index 87048c73..5a808f24 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-
         <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
-
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
-
         <div id="button-container">
             <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
         </div>
-
         <ul style="overflow-y: auto">
             <li><a href="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">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">
             <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 specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/actor-details.html
index e96b40fe..ad563777 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/actor-details.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
@@ -466,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
index 17112431..9b02e879 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
@@ -341,7 +341,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
     </nav>
     <div>
         <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>150,000</strong> monthly active users!</p>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
     </div>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html
index 438da315..4054ba67 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/company-details.html
index f0b6c77c..afb9de67 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/company-details.html
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/director-details.html
index 55acbdc4..14778aa6 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/director-details.html
@@ -820,7 +820,7 @@ <h2 id="director-name" class="director-header"></h2>
     document.getElementById('director-image').addEventListener('click', function() {
         const imageUrl = this.src.replace('w1280', 'original');
         const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html
index bfc4fb00..c50bce4e 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
         document.getElementById('movie-image').addEventListener('click', function() {
             let imageUrl = this.src.replace('w780', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
index 5aeeaee8..e34b5aad 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
@@ -354,7 +354,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
     </nav>
     <main>
         <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
+            <h2 style="cursor: pointer" id="newFeaturesHeader">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
@@ -370,7 +370,7 @@ <h2 style="cursor: pointer">New Features</h2>
             </p>
         </section>
         <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
+            <h2 id="newReleasesHeader" style="cursor: pointer">New Releases</h2>
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
             <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
@@ -385,7 +385,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
             </p>
         </section>
         <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <h2 style="cursor: pointer" id="tipsTricksHeader">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
@@ -400,7 +400,7 @@ <h2 style="cursor: pointer">Tips & Tricks</h2>
             </p>
         </section>
         <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
+            <h2 style="cursor: pointer" id="popularActorsHeader">Popular Actors</h2>
             <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -408,7 +408,7 @@ <h2 style="cursor: pointer">Popular Actors</h2>
             </p>
         </section>
         <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
+            <h2 style="cursor: pointer" id="popularDirectorsHeader">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -495,31 +495,31 @@ <h2 style="cursor: pointer">Popular Directors</h2>
             }
         });
 
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
+        document.getElementById('newFeaturesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('newReleases').addEventListener('click', function(e) {
+        document.getElementById('newReleasesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+        document.getElementById('tipsTricksHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularActors').addEventListener('click', function(e) {
+        document.getElementById('popularActorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+        document.getElementById('popularDirectorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/actor-details.js
index 0035b2e1..f8b7b542 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/actor-details.js
@@ -325,7 +325,7 @@ async function populateActorDetails(actor, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
@@ -808,4 +808,4 @@ function applyTextColor(color) {
         .forEach(element => {
             element.style.color = color;
         });
-}
\ No newline at end of file
+}
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chat.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chat.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js
index 6c17c9b3..30ad3a1f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js
@@ -268,63 +268,6 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
-function updateUniqueDirectorsViewed(directorId) {
-    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-    if (!viewedDirectors.includes(directorId)) {
-        viewedDirectors.push(directorId);
-        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
-    }
-}
-
-function updateActorVisitCount(actorId, actorName) {
-    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-    if (!actorVisits[actorId]) {
-        actorVisits[actorId] = { count: 0, name: actorName };
-    }
-
-    actorVisits[actorId].count += 1;
-    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
-}
-
-function updateDirectorVisitCount(directorId, directorName) {
-    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    if (!directorVisits[directorId]) {
-        directorVisits[directorId] = { count: 0, name: directorName };
-    }
-
-    directorVisits[directorId].count += 1;
-    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
-}
-
-function calculateMoviesToDisplay() {
-    const screenWidth = window.innerWidth;
-    if (screenWidth <= 689.9) return 10; // 1 movie per row
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -352,50 +295,6 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
@@ -419,41 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -468,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -552,68 +383,9 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    // if (lowerMessage.startsWith("do you know about ") ||
-    //     lowerMessage.startsWith("tell me about ") ||
-    //     lowerMessage.startsWith("what is ")) {
-    //     const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-    //     return await fetchMovieDetailsFromTMDB(movieName);
-    // }
-
-    // if (lowerMessage.startsWith("show me details about ") ||
-    //     lowerMessage.startsWith("i want to know more about ") ||
-    //     lowerMessage.startsWith("details about ") ||
-    //     lowerMessage.startsWith("search for ")) {
-    //     const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-    //     fetchAndRedirectToMovieDetails(movieName);
-    //     return `Searching for details about "${movieName}". Please wait...`;
-    // }
-
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
@@ -626,9 +398,6 @@ async function movieVerseResponse(message) {
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -688,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/director-details.js
index 4f8daa13..ce289989 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/director-details.js
@@ -317,7 +317,7 @@ async function populateDirectorDetails(director, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js
index 5d9e8acf..1f3c85b8 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js
@@ -1427,7 +1427,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
index 87048c73..5a808f24 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-
         <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
-
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
-
         <div id="button-container">
             <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
         </div>
-
         <ul style="overflow-y: auto">
             <li><a href="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">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 more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">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">
             <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 specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">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> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
index e96b40fe..ad563777 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
@@ -466,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
index 17112431..9b02e879 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
@@ -341,7 +341,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
     </nav>
     <div>
         <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>150,000</strong> monthly active users!</p>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
     </div>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
index 438da315..4054ba67 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
index f0b6c77c..afb9de67 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
index 55acbdc4..14778aa6 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
@@ -820,7 +820,7 @@ <h2 id="director-name" class="director-header"></h2>
     document.getElementById('director-image').addEventListener('click', function() {
         const imageUrl = this.src.replace('w1280', 'original');
         const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
index bfc4fb00..c50bce4e 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
         document.getElementById('movie-image').addEventListener('click', function() {
             let imageUrl = this.src.replace('w780', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
index 5aeeaee8..e34b5aad 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
@@ -354,7 +354,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
     </nav>
     <main>
         <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
+            <h2 style="cursor: pointer" id="newFeaturesHeader">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
@@ -370,7 +370,7 @@ <h2 style="cursor: pointer">New Features</h2>
             </p>
         </section>
         <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
+            <h2 id="newReleasesHeader" style="cursor: pointer">New Releases</h2>
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
             <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
@@ -385,7 +385,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
             </p>
         </section>
         <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <h2 style="cursor: pointer" id="tipsTricksHeader">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
@@ -400,7 +400,7 @@ <h2 style="cursor: pointer">Tips & Tricks</h2>
             </p>
         </section>
         <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
+            <h2 style="cursor: pointer" id="popularActorsHeader">Popular Actors</h2>
             <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -408,7 +408,7 @@ <h2 style="cursor: pointer">Popular Actors</h2>
             </p>
         </section>
         <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
+            <h2 style="cursor: pointer" id="popularDirectorsHeader">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -495,31 +495,31 @@ <h2 style="cursor: pointer">Popular Directors</h2>
             }
         });
 
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
+        document.getElementById('newFeaturesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('newReleases').addEventListener('click', function(e) {
+        document.getElementById('newReleasesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+        document.getElementById('tipsTricksHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularActors').addEventListener('click', function(e) {
+        document.getElementById('popularActorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+        document.getElementById('popularDirectorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/actor-details.js
index 0035b2e1..f8b7b542 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/actor-details.js
@@ -325,7 +325,7 @@ async function populateActorDetails(actor, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
@@ -808,4 +808,4 @@ function applyTextColor(color) {
         .forEach(element => {
             element.style.color = color;
         });
-}
\ No newline at end of file
+}
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chat.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chat.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
index 6c17c9b3..30ad3a1f 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
@@ -268,63 +268,6 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
-function updateUniqueDirectorsViewed(directorId) {
-    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
-    if (!viewedDirectors.includes(directorId)) {
-        viewedDirectors.push(directorId);
-        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
-    }
-}
-
-function updateActorVisitCount(actorId, actorName) {
-    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
-    if (!actorVisits[actorId]) {
-        actorVisits[actorId] = { count: 0, name: actorName };
-    }
-
-    actorVisits[actorId].count += 1;
-    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
-}
-
-function updateDirectorVisitCount(directorId, directorName) {
-    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    if (!directorVisits[directorId]) {
-        directorVisits[directorId] = { count: 0, name: directorName };
-    }
-
-    directorVisits[directorId].count += 1;
-    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
-}
-
-function calculateMoviesToDisplay() {
-    const screenWidth = window.innerWidth;
-    if (screenWidth <= 689.9) return 10; // 1 movie per row
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -352,50 +295,6 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
@@ -419,41 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -468,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -552,68 +383,9 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    // if (lowerMessage.startsWith("do you know about ") ||
-    //     lowerMessage.startsWith("tell me about ") ||
-    //     lowerMessage.startsWith("what is ")) {
-    //     const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-    //     return await fetchMovieDetailsFromTMDB(movieName);
-    // }
-
-    // if (lowerMessage.startsWith("show me details about ") ||
-    //     lowerMessage.startsWith("i want to know more about ") ||
-    //     lowerMessage.startsWith("details about ") ||
-    //     lowerMessage.startsWith("search for ")) {
-    //     const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-    //     fetchAndRedirectToMovieDetails(movieName);
-    //     return `Searching for details about "${movieName}". Please wait...`;
-    // }
-
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
@@ -626,9 +398,6 @@ async function movieVerseResponse(message) {
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -688,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/director-details.js
index 4f8daa13..ce289989 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/director-details.js
@@ -317,7 +317,7 @@ async function populateDirectorDetails(director, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
index 5d9e8acf..1f3c85b8 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
@@ -1427,7 +1427,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>

From 139af80f02e45bb2ab6cdcbd0abe9cfb0907ac6e Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 22 Jul 2024 20:29:44 +0700
Subject: [PATCH 15/18] Final: Enhance app functionalities (#196)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e0dd1a5a..70c52930 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "build": "npm run start",
     "test": "http-server -o",
     "serve": "http-server -o",
-    "docker": "docker-compose up",
+    "docker": "docker compose up",
     "dev:android": "cd MovieVerse-Mobile && cordova run android",
     "dev:ios": "cd MovieVerse-Mobile && cordova run ios",
     "build:android": "cd MovieVerse-Mobile && cordova build android",

From 47135e2850611ee552029baf89114f192d86da45 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Tue, 23 Jul 2024 10:22:04 +0700
Subject: [PATCH 16/18] Final: Enhance app functionalities (#196)

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 1b66b341..7fd41ea2 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="fb:app_id" content="753617793197513" />
     <meta property="og:title" content="The MovieVerse - Your Ultimate Movie Guide" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
@@ -33,6 +32,7 @@
     <meta name="twitter:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
     <meta name="yandex-verification" content="82af90b194a42a28" />
+    <meta property="fb:app_id" content="753617793197513" />
     <meta name="referrer" content="no-referrer-when-downgrade">
     <!-- JS and CSS files -->
     <script src="index.js" defer></script>

From 7c564d4c1dd19833afb679fb23079741111eb51a Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Tue, 23 Jul 2024 10:26:42 +0700
Subject: [PATCH 17/18] Final: Enhance app functionalities (#196)

---
 .github/README.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/README.md b/.github/README.md
index ec94bfc7..1ee96e6a 100644
--- a/.github/README.md
+++ b/.github/README.md
@@ -152,11 +152,15 @@ Or, for your convenience, you may simply run the following command, provided tha
     cordova emulate ios
     cordova emulate android
     ```
-11. If you'd also like to dockerize the application, you can run the following command:
+11. If you'd also like to dockerize the application, `cd` into the root directory and run the following command:
     ```bash
     npm run docker
     ```
-    This will create a Docker image of the application, which you can then deploy to a containerized environment.
+    Or
+    ```bash
+    docker compose up
+    ```
+    This will create a Docker image of the application, which you can then deploy to a containerized environment. Ensure that Docker is up and running on your system before running this command.
 12. As you develop, be sure to save & commit your changes (and don't forget to create a branch for your new feature):
     ```bash
     git commit -m 'Add some AmazingFeature'

From 9853e48c604fd0dd0dd834f394d96333c78383f8 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Tue, 23 Jul 2024 10:29:37 +0700
Subject: [PATCH 18/18] Final: Enhance app functionalities (#196)

---
 MovieVerse-Frontend/README.md | 6 ++++--
 index.html                    | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/MovieVerse-Frontend/README.md b/MovieVerse-Frontend/README.md
index 08035ab6..1a216e41 100644
--- a/MovieVerse-Frontend/README.md
+++ b/MovieVerse-Frontend/README.md
@@ -122,7 +122,7 @@ The tests directory contains a collection of test scripts and suites for the `Mo
 
 ## Getting Started
 
-To get started with MovieVerse:
+To get started with `MovieVerse-Frontend`:
 
 1. **Clone the repository**: Use Git to clone the app to your local machine:
     ```bash
@@ -140,12 +140,14 @@ To get started with MovieVerse:
     ```bash
     yarn install
     ```
-4. **Run the app**: Start the frontend server on your local server and navigate to the appropriate port to view it:
+4. **Run the app**: `cd` into the root directory then start the frontend server on your local server and navigate to the appropriate port to view it:
     ```bash
+    cd ..
     npm start
     ```
     Or using yarn:
      ```bash
+     cd ..
      yarn start
      ```
 5. **Explore the app**: Interact with the app's features, pages, and functionalities to get a feel for how it works.
diff --git a/index.html b/index.html
index 7fd41ea2..7c717780 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:image:alt" content="Movie reel and popcorn, symbolizing The MovieVerse as a guide to the cinema world" />
     <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="keywords" content="movies, movies verse, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, moviesverse, movieverse, moviesvers, film" />
+    <meta name="keywords" content="movies, movies verse, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, moviesverse, movieverse, moviesvers, film, movie" />
     <meta name="author" content="Son Nguyen Hoang">
     <link rel="canonical" href="https://movie-verse.com/"/>
     <meta name="robots" content="index, follow">
